import React from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Check, Info } from 'lucide-react';
import { ProductLicense } from '../../types';

interface LicenceCardProps {
  license: ProductLicense;
  onSelect: (license: ProductLicense) => void;
  onInfo: (license: ProductLicense) => void;
  selected?: boolean;
}

export const LicenceCard: React.FC<LicenceCardProps> = ({
  license,
  onSelect,
  onInfo,
  selected,
}) => {
  return (
    <Card
      variant={selected ? 'gaming' : 'default'}
      className={`p-4 transition-all cursor-pointer h-full flex flex-col ${selected ? 'border-kodo-cyan shadow-neon-cyan/20 bg-kodo-cyan/5' : 'hover:border-kodo-steel'}`}
      onClick={() => onSelect(license)}
    >
      <div className="flex justify-between items-start mb-4">
        <div>
          <h4 className="font-bold text-white text-lg">{license.name}</h4>
          {license.isPopular && (
            <span className="text-[10px] text-black bg-kodo-gold px-2 py-0.5 rounded font-bold uppercase">
              Popular
            </span>
          )}
        </div>
        <div className="text-xl font-mono font-bold text-kodo-cyan">
          ${license.price}
        </div>
      </div>

      <ul className="space-y-2 mb-6 flex-1">
        {license.features.slice(0, 3).map((feat, i) => (
          <li key={i} className="flex items-start gap-2 text-sm text-gray-300">
            <Check className="w-4 h-4 text-kodo-lime flex-shrink-0 mt-0.5" />
            <span className="leading-snug">{feat}</span>
          </li>
        ))}
        {license.features.length > 3 && (
          <li className="text-xs text-gray-500 pl-6">
            + {license.features.length - 3} more features
          </li>
        )}
      </ul>

      <div className="flex gap-2 mt-auto">
        <Button
          variant={selected ? 'primary' : 'secondary'}
          className="flex-1"
          size="sm"
        >
          {selected ? 'SELECTED' : 'SELECT'}
        </Button>
        <Button
          variant="ghost"
          size="icon"
          className="border border-kodo-steel"
          onClick={(e) => {
            e.stopPropagation();
            onInfo(license);
          }}
        >
          <Info className="w-4 h-4" />
        </Button>
      </div>
    </Card>
  );
};
