import { Loader2, Lock } from 'lucide-react';

interface PolicyToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
    loading?: boolean;
    id?: string;
    label?: string;
}

export function PolicyToggle({
    checked,
    onChange,
    disabled = false,
    loading = false,
    id,
    label,
}: PolicyToggleProps) {
    const isDisabled = disabled || loading;

    return (
        <button
            type="button"
            id={id}
            role="switch"
            aria-checked={checked}
            aria-label={label}
            disabled={isDisabled}
            onClick={() => {
                if (!isDisabled) {
                    onChange(!checked);
                }
            }}
            className={`group relative inline-flex h-7 w-12 shrink-0 items-center rounded-full transition-colors duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 ${
                checked ? 'bg-emerald-500' : 'bg-slate-600'
            } ${isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
        >
            <span
                className={`inline-flex h-5 w-5 transform items-center justify-center rounded-full bg-white shadow-md transition-transform duration-200 ease-out ${
                    checked ? 'translate-x-6' : 'translate-x-1'
                }`}
            >
                {loading ? (
                    <Loader2 className="h-3 w-3 animate-spin text-emerald-600" aria-hidden="true" />
                ) : checked ? (
                    <Lock className="h-3 w-3 text-emerald-600" aria-hidden="true" />
                ) : null}
            </span>
        </button>
    );
}