import type { PageProps } from '@/types';
import { usePage } from '@inertiajs/react';
import { CheckCircle2 } from 'lucide-react';

// ── Reusable form field ────────────────────────────────────────────────────────

export function Field({
    label,
    hint,
    error,
    children,
    required,
}: {
    label: string;
    hint?: string;
    error?: string;
    children: React.ReactNode;
    required?: boolean;
}) {
    return (
        <div className="grid gap-1.5 sm:grid-cols-3 sm:items-start sm:gap-4">
            <label className="text-foreground pt-2 text-sm font-medium">
                {label}
                {required && <span className="text-destructive ml-0.5">*</span>}
            </label>
            <div className="sm:col-span-2">
                {children}
                {hint && !error && (
                    <p className="text-muted-foreground mt-1 text-xs">{hint}</p>
                )}
                {error && (
                    <p className="text-destructive mt-1 text-xs">{error}</p>
                )}
            </div>
        </div>
    );
}

// ── Section divider ────────────────────────────────────────────────────────────

export function Section({
    title,
    children,
}: {
    title: string;
    children: React.ReactNode;
}) {
    return (
        <div className="space-y-5">
            <h4 className="text-foreground/60 text-xs font-semibold tracking-widest uppercase">
                {title}
            </h4>
            {children}
        </div>
    );
}

// ── Form card ──────────────────────────────────────────────────────────────────

export function FormCard({ children }: { children: React.ReactNode }) {
    return <div className="pf-glass space-y-6 p-6">{children}</div>;
}

// ── Flash banner ──────────────────────────────────────────────────────────────

export function FlashBanner() {
    const { props } = usePage<PageProps>();
    const success = (props.flash as { success?: string } | undefined)?.success;
    if (!success) return null;
    return (
        <div className="flex items-center gap-2 rounded-lg bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
            <CheckCircle2 className="h-4 w-4 shrink-0" />
            {success}
        </div>
    );
}