import 'package:flutter/material.dart';
import '../../app/theme/app_colors.dart';

/// Reusable prayer time card widget for the horizontal scroll on Dashboard.
/// Will be fully implemented in Phase 3.
class PrayerTimeCard extends StatelessWidget {
  const PrayerTimeCard({
    super.key,
    required this.prayerName,
    required this.time,
    required this.icon,
    this.isActive = false,
  });

  final String prayerName;
  final String time;
  final IconData icon;
  final bool isActive;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Container(
      width: 112,
      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
      decoration: BoxDecoration(
        color: isActive
            ? AppColors.primary.withValues(alpha: 0.1)
            : theme.cardTheme.color,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: isActive
              ? AppColors.primary
              : AppColors.primary.withValues(alpha: 0.1),
          width: isActive ? 2 : 1,
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            size: 24,
            color: isActive ? AppColors.primary : AppColors.sage,
          ),
          const SizedBox(height: 8),
          Text(
            prayerName,
            style: theme.textTheme.bodySmall?.copyWith(
              fontWeight: FontWeight.bold,
              color: isActive ? AppColors.primary : null,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            time,
            style: theme.textTheme.bodySmall?.copyWith(
              color: isActive
                  ? AppColors.primary
                  : theme.textTheme.bodySmall?.color,
            ),
          ),
        ],
      ),
    );
  }
}