import { motion } from 'framer-motion'
import { Check, ArrowRight } from 'lucide-react'

interface Props {
    name: string
    code: string
    price: number
    annualPrice: number
    features: string[]
    popular?: boolean
    selected?: boolean
    onSelect: (code: string) => void
}

export default function PlanCard({ name, code, price, annualPrice, features, popular, selected, onSelect }: Props) {
    return (
        <motion.button
            whileHover={{ y: -4, scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={() => onSelect(code)}
            className={`relative w-full text-left p-6 rounded-2xl border transition-all duration-300 ${
                selected
                    ? 'border-cyan-400 bg-cyan-400/5 shadow-[0_0_30px_rgba(34,211,238,0.15)]'
                    : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]'
            }`}
        >
            {popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 bg-gradient-to-r from-cyan-400 to-sky-500 rounded-full text-[10px] font-bold text-black uppercase tracking-wider">
                    Popular
                </div>
            )}
            <div className="text-lg font-bold text-white mb-1">{name}</div>
            <div className="flex items-baseline gap-1 mb-4">
                <span className="text-3xl font-bold text-white">RM{price}</span>
                <span className="text-sm text-slate-400">/mo</span>
                {price > 0 && (
                    <span className="text-xs text-slate-500 ml-1">RM{annualPrice}/yr</span>
                )}
            </div>
            <ul className="space-y-2 mb-4">
                {features.map((feature, i) => (
                    <li key={i} className="flex items-center gap-2 text-sm text-slate-300">
                        <Check className="w-4 h-4 text-cyan-400 flex-shrink-0" />
                        {feature}
                    </li>
                ))}
            </ul>
            <div className={`flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-semibold transition-all ${
                selected
                    ? 'bg-gradient-to-r from-cyan-400 to-sky-500 text-black'
                    : 'bg-white/5 text-slate-300 group-hover:bg-white/10'
            }`}>
                {selected ? 'Selected' : 'Choose Plan'}
                <ArrowRight className="w-4 h-4" />
            </div>
        </motion.button>
    )
}