import type { ReactNode } from 'react';

import { Link } from '@inertiajs/react';

type DashboardTablePanelProps = {
    title: string;
    actionHref: string;
    actionLabel: string;
    children: ReactNode;
};

/** Table card with consistent padding and scroll for dashboard rows. */
export function DashboardTablePanel({ title, actionHref, actionLabel, children }: DashboardTablePanelProps) {
    return (
        <div className="box flex h-full min-h-[18rem] flex-col">
            <div className="box-header flex flex-wrap items-center justify-between gap-3 border-b border-gray-100 dark:border-white/10">
                <h5 className="box-title mb-0">{title}</h5>
                <Link href={actionHref} className="text-primary text-sm font-medium shrink-0">
                    {actionLabel}
                </Link>
            </div>
            <div className="box-body min-h-0 flex-1 p-0">
                <div className="table-responsive h-full">{children}</div>
            </div>
        </div>
    );
}