'use client'
import { useTranslation } from "@/Utils/Hooks/useTranslate";

type NoDataVariant = "default" | "search" | "empty-box" | "rocket" | "campaign" | "inbox";

const variantConfig: Record<NoDataVariant, { emoji: string; tint: string }> = {
    default:     { emoji: "📦", tint: "from-primary/15 to-accent/15" },
    search:      { emoji: "🔍", tint: "from-[#66d9ef]/20 to-primary/15" },
    "empty-box": { emoji: "📭", tint: "from-[#fbbf24]/25 to-[#FF5FB4]/20" },
    rocket:      { emoji: "🚀", tint: "from-primary/15 to-accent/20" },
    campaign:    { emoji: "📣", tint: "from-accent/15 to-[#66d9ef]/15" },
    inbox:       { emoji: "✉️", tint: "from-[#FF5FB4]/15 to-primary/15" },
};

const NoDataTable = (props: {
    colSpan: number;
    variant?: NoDataVariant;
    customMessage?: string;
    subtitle?: string;
}) => {
    const { colSpan, variant = "default", customMessage, subtitle } = props;
    const { translations } = useTranslation();
    const v = variantConfig[variant] ?? variantConfig.default;
    return (
        <tr className={"align-middle"}>
            <td colSpan={colSpan} className="px-5 py-12 text-center">
                <div className="flex flex-col items-center justify-center gap-3">
                    <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${v.tint} flex items-center justify-center text-4xl shadow-soft`}>
                        <span aria-hidden>{v.emoji}</span>
                    </div>
                    <p className="text-display text-base sm:text-lg font-bold text-neutral-900 leading-tight">{customMessage ?? translations.noDataFound}</p>
                    {subtitle && <p className="text-sm text-neutral-500 max-w-sm">{subtitle}</p>}
                </div>
            </td>
        </tr>
    )
}

export default NoDataTable