export function Field({
    icon: Icon,
    label,
    children,
}: {
    icon: React.ComponentType<{ className?: string }>;
    label: string;
    children: React.ReactNode;
}) {
    return (
        <div className="flex items-start gap-3 py-3">
            <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
                <Icon className="text-muted-foreground h-4 w-4" />
            </div>
            <div className="min-w-0">
                <p className="text-muted-foreground mb-0.5 text-[11px] font-medium tracking-wide uppercase">
                    {label}
                </p>
                <div className="text-foreground text-sm font-medium">
                    {children}
                </div>
            </div>
        </div>
    );
}

export function Section({
    title,
    children,
}: {
    title: string;
    children: React.ReactNode;
}) {
    return (
        <div className="bg-card border-border rounded-xl border p-6">
            <h2 className="text-foreground mb-4 text-sm font-semibold">
                {title}
            </h2>
            <div className="divide-border divide-y">{children}</div>
        </div>
    );
}

export function SimpleTable({
    headers,
    children,
}: {
    headers: string[];
    children: React.ReactNode;
}) {
    return (
        <div className="overflow-x-auto">
            <table className="w-full text-sm">
                <thead>
                    <tr className="border-border border-b">
                        {headers.map((h) => (
                            <th
                                key={h}
                                className="text-muted-foreground px-6 py-3 text-left text-[10px] font-semibold tracking-wider uppercase"
                            >
                                {h}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody className="divide-border divide-y">{children}</tbody>
            </table>
        </div>
    );
}

export function EmptyTab({ text }: { text: string }) {
    return (
        <p className="text-muted-foreground py-10 text-center text-sm">
            {text}
        </p>
    );
}