import { router } from '@inertiajs/react';
import { Switch } from '@/components/ui/switch';

type ToggleStatusProps = {
    url: string;
    checked: boolean;
    onToggle?: () => void;
    label?: string;
    wrapperClassName?: string;
};

export function ToggleStatus({
    url,
    checked,
    onToggle,
    label,
    wrapperClassName = 'flex items-center gap-2',
}: ToggleStatusProps) {
    function handleToggle() {
        onToggle?.();
        router.post(url, {}, { preserveScroll: true });
    }

    return (
        <div className={wrapperClassName}>
            <Switch
                size="sm"
                checked={checked}
                onCheckedChange={handleToggle}
            />
            {label && (
                <span
                    className={`text-xs font-medium ${checked ? 'text-green-700' : 'text-red-700'}`}
                >
                    {label}
                </span>
            )}
        </div>
    );
}