import * as React from "react";
import { Card, CardContent } from "../../ui/card";
import { Button } from "../../ui/button";
import { ImageWithFallback } from "../../common/ImageWithFallback";
import { Badge } from "../../ui/badge";
import { motion } from "motion/react";

interface ServiceCardProps {
  name: string;
  icon: string;
  color: string;
  imageUrl?: string;
  onClick: () => void;
  index?: number;
}

export const ServiceCard = React.forwardRef<HTMLDivElement, ServiceCardProps>(
  ({ name, icon, color, imageUrl, onClick, index = 0 }, ref) => {
    return (
      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          duration: 0.4,
          delay: index * 0.1,
          ease: [0.25, 0.1, 0.25, 1]
        }}
        whileHover={{
          y: -8,
          transition: { duration: 0.2 }
        }}
        whileTap={{ scale: 0.98 }}
        onClick={onClick}
        className="cursor-pointer"
      >
      <Card className="hover:shadow-2xl transition-all duration-300 border hover:border-primary/20 h-full bg-gradient-to-br from-white to-gray-50/50 dark:from-gray-900 dark:to-gray-800/50 backdrop-blur-sm overflow-hidden group">
        <CardContent className="p-6 flex flex-col items-center gap-4 relative">
          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-primary/5 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          
          <motion.div 
            className="w-20 h-20 rounded-2xl flex items-center justify-center shadow-md overflow-hidden relative z-10 ring-2 ring-white"
            style={{ backgroundColor: imageUrl ? 'transparent' : color }}
            whileHover={{ rotate: [0, -3, 3, -3, 0], scale: 1.1 }}
            transition={{ duration: 0.5 }}
          >
            {imageUrl ? (
              <ImageWithFallback
                src={imageUrl}
                alt={name}
                className="w-full h-full object-cover"
              />
            ) : (
              <span className="text-4xl">{icon}</span>
            )}
          </motion.div>
          
          <div className="relative z-10 text-center">
            <h3 className="mb-1">{name}</h3>
            <Badge variant="secondary" className="text-xs opacity-0 group-hover:opacity-100 transition-opacity">
              클릭하여 연결
            </Badge>
          </div>
        </CardContent>
      </Card>
    </motion.div>
    );
  }
);
ServiceCard.displayName = "ServiceCard";