import { motion, useReducedMotion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Surface } from './Surface';
import { Text } from './Text';

interface BenefitCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  stats?: {
    value: string;
    label: string;
  };
  variant?: 'default' | 'highlight';
  delay?: number;
}

export function BenefitCard({
  icon,
  title,
  description,
  stats,
  variant = 'default',
  delay = 0,
}: BenefitCardProps) {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const isHighlight = variant === 'highlight';

  const cardContent = (
    <Surface
      variant="muted"
      rounded="xl"
      border={true}
      padding={6}
      className={`relative h-full transition-all duration-300 group ${isHighlight ? 'border-primary-blue/30' : 'border-charcoal-outline hover:border-charcoal-outline/80'}`}
      style={isHighlight ? { background: 'linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), rgba(25, 140, 255, 0.05))' } : {}}
    >
      {/* Icon */}
      <Box 
        width="12" 
        height="12" 
        rounded="xl" 
        display="flex" 
        center 
        mb={4}
        bg={isHighlight ? 'bg-primary-blue/20' : 'bg-iron-gray'}
        border={!isHighlight}
        borderColor="border-charcoal-outline"
      >
        <Icon icon={icon} size={6} className={isHighlight ? 'text-primary-blue' : 'text-gray-400'} />
      </Box>

      {/* Content */}
      <Heading level={3} mb={2}>{title}</Heading>
      <Text size="sm" color="text-gray-400" block style={{ lineHeight: 1.625 }}>{description}</Text>

      {/* Stats */}
      {stats && (
        <Box mt={4} pt={4} borderTop={true} borderColor="border-charcoal-outline/50">
          <Box display="flex" alignItems="baseline" gap={2}>
            <Text size="2xl" weight="bold" color={isHighlight ? 'text-primary-blue' : 'text-white'}>
              {stats.value}
            </Text>
            <Text size="sm" color="text-gray-500">{stats.label}</Text>
          </Box>
        </Box>
      )}

      {/* Highlight Glow Effect */}
      {isHighlight && (
        <Box 
          position="absolute" 
          inset="0" 
          rounded="xl" 
          className="bg-gradient-to-br from-primary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" 
        />
      )}
    </Surface>
  );

  if (!isMounted || shouldReduceMotion) {
    return <Box fullHeight>{cardContent}</Box>;
  }

  return (
    <Box
      as={motion.div}
      fullHeight
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay }}
      whileHover={{ y: -4, transition: { duration: 0.2 } }}
    >
      {cardContent}
    </Box>
  );
}