import { router } from '@inertiajs/react';
import { Trash2 } from 'lucide-react';
import { BrandChip } from '@/components/shared/badges';
import { cn } from '@/lib/utils';

export function DisclaimerRow({
    disclaimer,
    canEdit,
}: {
    disclaimer: {
        id: number;
        brand_code: string;
        name: string;
        text_de: string | null;
        position: string;
        targets_count: number;
    };
    canEdit: boolean;
}) {
    const remove = () =>
        router.delete(`/disclaimers/${disclaimer.id}`, {
            preserveScroll: true,
        });

    return (
        <div className="flex items-start justify-between gap-3 px-4 py-3">
            <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                    <span className="text-xs font-bold text-astara-purple">
                        {disclaimer.name}
                    </span>
                    <BrandChip label={disclaimer.brand_code} />
                    <span className="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[9px] leading-none font-bold text-slate-500 uppercase">
                        {disclaimer.position.replaceAll('_', ' ')}
                    </span>
                </div>
                <p className="mt-1 truncate text-[11px] text-gray-600 italic">
                    “{disclaimer.text_de}”
                </p>
                <span className="mt-1 inline-block rounded-full bg-gray-100 px-2 py-0.5 text-[9px] font-bold text-gray-500">
                    used on {disclaimer.targets_count}{' '}
                    {disclaimer.targets_count === 1 ? 'target' : 'targets'}
                </span>
            </div>
            {canEdit && (
                <button
                    type="button"
                    onClick={remove}
                    aria-label={`Delete ${disclaimer.name}`}
                    className={cn(
                        'flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-red-50 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:outline-none',
                    )}
                >
                    <Trash2 size={13} />
                </button>
            )}
        </div>
    );
}