import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { Pencil } from 'lucide-react';
import type { ReactNode } from 'react';

export function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
    return <h2 className={cn('text-foreground text-base font-bold tracking-wide uppercase', className)}>{children}</h2>;
}

/** Lien « Modifier » d'une carte : ouvre l'assistant directement à la bonne étape. */
export function CardEditLink({ href, label }: { href: string; label: string }) {
    return (
        <Button asChild variant="ghost" size="sm" className="text-primary dark:text-secondary -my-1 h-7 px-2">
            <Link href={href}>
                <Pencil className="h-3.5 w-3.5" />
                {label}
            </Link>
        </Button>
    );
}

interface DetailCardProps {
    title: string;
    /** Absent = pas de droit de modification : aucun lien. */
    editHref?: string | null;
    editLabel?: string;
    children: ReactNode;
    className?: string;
}

export function DetailCard({ title, editHref, editLabel, children, className }: DetailCardProps) {
    return (
        <Card className={cn('gap-0', className)}>
            <CardContent>
                <div className="mb-2 flex min-h-7 items-center justify-between gap-2">
                    <SectionTitle>{title}</SectionTitle>
                    {editHref && editLabel && <CardEditLink href={editHref} label={editLabel} />}
                </div>
                {children}
            </CardContent>
        </Card>
    );
}

/** Ligne « libellé … valeur » d'une carte de détail. */
export function DetailRow({ label, children }: { label: string; children: ReactNode }) {
    return (
        <div className="border-border flex items-baseline justify-between gap-4 border-b border-dashed py-1.5 text-sm last:border-b-0">
            <span className="text-muted-foreground">{label}</span>
            <span className="text-right font-medium tabular-nums">{children}</span>
        </div>
    );
}