import { Info } from 'lucide-react';
import type { ProtectionRuleDef } from '../utils/protectionRules';
import { PolicyToggle } from './PolicyToggle';

interface ProtectionRuleCardProps {
    rule: ProtectionRuleDef;
    enabled: boolean;
    readOnly: boolean;
    loading?: boolean;
    onToggle: (enabled: boolean) => void;
}

export function ProtectionRuleCard({
    rule,
    enabled,
    readOnly,
    loading = false,
    onToggle,
}: ProtectionRuleCardProps) {
    const Icon = rule.icon;

    return (
        <article
            className="group relative flex flex-col gap-4 rounded-2xl border border-slate-800/80 bg-slate-950/50 p-5 transition-all duration-200 hover:border-slate-700/80 hover:bg-slate-900/40"
        >
            <div className="flex items-start justify-between gap-4">
                <div className="flex min-w-0 flex-1 gap-3">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-rose-500/20 bg-rose-500/10">
                        <Icon className="h-5 w-5 text-rose-400" aria-hidden="true" />
                    </div>
                    <div className="min-w-0 flex-1 space-y-1.5">
                        <div className="flex items-center gap-2">
                            <h5 className="text-sm font-bold text-white">{rule.name}</h5>
                            <button
                                type="button"
                                className="group/info relative shrink-0 rounded p-0.5 text-slate-500 transition-colors hover:text-slate-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40"
                                aria-label={`More about ${rule.name}`}
                            >
                                <Info className="h-3.5 w-3.5" aria-hidden="true" />
                                <span
                                    role="tooltip"
                                    className="pointer-events-none absolute bottom-full left-1/2 z-30 mb-2 hidden w-64 -translate-x-1/2 rounded-xl border border-slate-700 bg-slate-900 px-3 py-2 text-left text-[11px] leading-relaxed text-slate-300 shadow-xl group-hover/info:block group-focus/info:block"
                                >
                                    {rule.tooltip}
                                </span>
                            </button>
                        </div>
                        <p className="text-xs leading-relaxed text-slate-400">{rule.description}</p>
                    </div>
                </div>

                <PolicyToggle
                    checked={enabled}
                    onChange={onToggle}
                    disabled={readOnly}
                    loading={loading}
                    label={`${rule.name} ${enabled ? 'enabled' : 'disabled'}`}
                />
            </div>
        </article>
    );
}