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 NoData = (props: {
    customClass?: string;
    customMessage?: string;
    variant?: NoDataVariant;
    subtitle?: string;
}) => {
    const { translations } = useTranslation();
    const { customClass = "", customMessage = translations.noDataFound, variant = "default", subtitle } = props;
    const v = variantConfig[variant] ?? variantConfig.default;

    return (
        <div className={`${customClass} w-full py-10 px-4 text-center flex flex-col items-center justify-center gap-3`}>
            <div className={`mx-auto 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}</p>
            {subtitle && <p className="text-sm text-neutral-500 max-w-sm">{subtitle}</p>}
        </div>
    )
}

export default NoData