import React from "react";
import { motion } from "framer-motion";
import Typography from "../Typography/Typography";

interface SettingCardProps {
  title: string;
  description?: string;
  icon?: React.ComponentType<{ className?: string }>;
  onClick?: () => void;
  children?: React.ReactNode;
  className?: string;
  iconColor?: string;
}

export const SettingCard: React.FC<SettingCardProps> = ({
  title,
  description,
  icon: Icon,
  onClick,
  children,
  className = "",
  iconColor = "text-primary-600 dark:text-primary-400",
}) => {
  const cardVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.3,
        ease: "easeOut",
      },
    },
    hover: {
      y: -6,
      scale: 1.03,
      transition: { duration: 0.2 },
    },
    tap: { scale: 0.97 },
  };

  const iconVariants = {
    hover: {
      scale: 1.1,
      rotate: [0, -5, 5, -5, 0],
      transition: { duration: 0.4 },
    },
  };

  return (
    <motion.div
      variants={cardVariants}
      initial="hidden"
      animate="visible"
      whileHover="hover"
      whileTap="tap"
      onClick={onClick}
      className={`
        bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 
        border border-gray-200 dark:border-gray-700 
        hover:border-primary-300 dark:hover:border-primary-800
        transition-all duration-300
        relative overflow-hidden group
        ${onClick ? "cursor-pointer" : ""}
        ${className}
      `}
    >
      <div className="absolute inset-0 bg-gradient-to-br dark:from-primary-900/0 dark:via-primary-900/0 dark:to-primary-900/0 dark:group-hover:from-primary-900/20 dark:group-hover:via-primary-900/10 dark:group-hover:to-primary-900/20 transition-all duration-500" />

      <div className="flex items-center gap-3 mb-2">
        {Icon && (
          <motion.div
            variants={iconVariants}
            whileHover="hover"
            className={`flex-shrink-0 inline-flex items-center justify-center w-8 h-8 rounded-lg bg-primary-50 dark:bg-primary-900/30 ${iconColor} group-hover:bg-primary-100 dark:group-hover:bg-primary-900/50 transition-colors duration-300`}
          >
            <Icon className="w-5 h-5" />
          </motion.div>
        )}
        <Typography
          variant="subtitle2"
          className="flex-1"
          color="text-gray-900 dark:text-white"
          fontWeight="semibold"
        >
          {title}
        </Typography>
      </div>

      {description && (
        <Typography
          variant="body2"
          className="mb-2 text-xs"
          color="text-gray-600 dark:text-gray-300"
          fontWeight="normal"
        >
          {description}
        </Typography>
      )}

      {children && <div className="w-full min-w-0 mt-1">{children}</div>}

      <motion.div
        className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-primary-500 to-primary-600 dark:from-primary-400 dark:to-primary-500 rounded-b-2xl"
        initial={{ width: 0 }}
        whileHover={{ width: "100%" }}
        transition={{ duration: 0.4, ease: "easeOut" }}
      />

      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
      </div>
    </motion.div>
  );
};

export default SettingCard;
