import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../theme/app_theme.dart';
import '../models/cycle_entry.dart';

class ScriptureCard extends StatelessWidget {
  final String verse;
  final String reference;
  final CyclePhase phase;

  const ScriptureCard({
    super.key,
    required this.verse,
    required this.reference,
    required this.phase,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: _getGradientColors(phase),
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: _getPhaseColor(phase).withOpacity(0.2),
            blurRadius: 15,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Scripture icon
          Row(
            children: [
              Container(
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.3),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  Icons.menu_book_outlined,
                  size: 18,
                  color: AppColors.charcoal.withOpacity(0.8),
                ),
              ),
              const SizedBox(width: 8),
              Text(
                'Today\'s Verse',
                style: GoogleFonts.outfit(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: AppColors.charcoal.withOpacity(0.7),
                  letterSpacing: 0.5,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          
          // Verse
          Text(
            '"$verse"',
            style: GoogleFonts.lora(
              fontSize: 16,
              fontStyle: FontStyle.italic,
              color: AppColors.charcoal,
              height: 1.6,
            ),
          ),
          const SizedBox(height: 12),
          
          // Reference
          Text(
            '— $reference',
            style: GoogleFonts.outfit(
              fontSize: 13,
              fontWeight: FontWeight.w500,
              color: AppColors.warmGray,
            ),
          ),
        ],
      ),
    );
  }

  List<Color> _getGradientColors(CyclePhase phase) {
    switch (phase) {
      case CyclePhase.menstrual:
        return [
          AppColors.blushPink.withOpacity(0.6),
          AppColors.cream,
        ];
      case CyclePhase.follicular:
        return [
          AppColors.sageGreen.withOpacity(0.3),
          AppColors.cream,
        ];
      case CyclePhase.ovulation:
        return [
          AppColors.lavender.withOpacity(0.5),
          AppColors.cream,
        ];
      case CyclePhase.luteal:
        return [
          AppColors.lutealPhase.withOpacity(0.3),
          AppColors.cream,
        ];
    }
  }

  Color _getPhaseColor(CyclePhase phase) {
    switch (phase) {
      case CyclePhase.menstrual:
        return AppColors.menstrualPhase;
      case CyclePhase.follicular:
        return AppColors.follicularPhase;
      case CyclePhase.ovulation:
        return AppColors.ovulationPhase;
      case CyclePhase.luteal:
        return AppColors.lutealPhase;
    }
  }
}