'use client';

import { motion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';

interface RoleCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  features: string[];
  color: string;
  selected?: boolean;
  onClick?: () => void;
}

export default function RoleCard({
  icon: Icon,
  title,
  description,
  features,
  color,
  selected = false,
  onClick,
}: RoleCardProps) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      className={`w-full text-left p-4 rounded-xl border transition-all duration-200 ${
        selected
          ? `border-${color} bg-${color}/10 shadow-[0_0_20px_rgba(25,140,255,0.2)]`
          : 'border-charcoal-outline bg-iron-gray/50 hover:border-gray-600 hover:bg-iron-gray'
      }`}
    >
      <div className="flex items-start gap-3">
        <div
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
            selected ? `bg-${color}/20` : 'bg-deep-graphite'
          }`}
        >
          <Icon className={`w-5 h-5 ${selected ? `text-${color}` : 'text-gray-400'}`} />
        </div>
        <div className="flex-1 min-w-0">
          <h3
            className={`font-semibold transition-colors ${
              selected ? 'text-white' : 'text-gray-200'
            }`}
          >
            {title}
          </h3>
          <p className="text-xs text-gray-500 mt-0.5">{description}</p>
        </div>
        <div
          className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${
            selected ? 'border-primary-blue bg-primary-blue' : 'border-gray-600'
          }`}
        >
          {selected && (
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              className="w-2 h-2 rounded-full bg-white"
            />
          )}
        </div>
      </div>
      <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
        <ul className="space-y-1">
          {features.map((feature, index) => (
            <li key={index} className="text-xs text-gray-400 flex items-center gap-2">
              <span
                className={`w-1 h-1 rounded-full ${selected ? 'bg-primary-blue' : 'bg-gray-600'}`}
              />
              {feature}
            </li>
          ))}
        </ul>
      </div>
    </motion.button>
  );
}