import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";

interface SkillBadgeProps {
  name: string;
  icon?: string;
  color?: string;
  delay?: number;
}

export const SkillBadge = ({ name, icon, color = "default", delay = 0 }: SkillBadgeProps) => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.3, delay }}
      whileHover={{ scale: 1.05 }}
    >
      <Badge
        variant="secondary"
        className="text-base py-2 px-4 font-medium hover:bg-primary hover:text-primary-foreground transition-colors"
      >
        {icon && <span className="mr-2">{icon}</span>}
        {name}
      </Badge>
    </motion.div>
  );
};