import type { ReactNode } from 'react';

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

type DashboardPanelProps = {
    title: string;
    description?: string;
    actionHref?: string;
    actionLabel?: string;
    children: ReactNode;
    bodyClassName?: string;
};

/** Uniform Synto box shell for dashboard sections. */
export function DashboardPanel({
    title,
    description,
    actionHref,
    actionLabel,
    children,
    bodyClassName = '',
}: DashboardPanelProps) {
    return (
        <div className="box flex h-full min-h-0 flex-col">
            <div className="box-header flex flex-wrap items-center justify-between gap-3">
                <div className="min-w-0">
                    <h5 className="box-title">{title}</h5>
                    {description ? (
                        <p className="mb-0 text-xs text-gray-500 dark:text-white/60">{description}</p>
                    ) : null}
                </div>
                {actionHref && actionLabel ? (
                    <Link href={actionHref} className="ti-btn ti-btn-sm ti-btn-primary shrink-0">
                        {actionLabel}
                    </Link>
                ) : null}
            </div>
            <div className={`box-body min-h-0 flex-1 ${bodyClassName}`}>{children}</div>
        </div>
    );
}