import { TenantCard } from '@/types';

export default function PlanBadge({
    plan,
    planStatus,
    trialEndsAt,
}: Pick<TenantCard, 'plan' | 'planStatus' | 'trialEndsAt'>) {
    if (!plan)
        return (
            <span className="text-muted-foreground dark:text-muted-foreground/50 text-xs">
                —
            </span>
        );

    if (planStatus === 'trialing') {
        const days = trialEndsAt
            ? Math.ceil(
                  (new Date(trialEndsAt).getTime() - Date.now()) / 86_400_000,
              )
            : null;
        if (days !== null && days <= 0) {
            return (
                <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:border-amber-700/30 dark:bg-amber-900/20 dark:text-amber-400">
                    {plan} · trial ended
                </span>
            );
        }
        return (
            <span className="rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-semibold text-sky-700 dark:border-sky-700/30 dark:bg-sky-900/20 dark:text-sky-400">
                {plan} · {days !== null ? `${days}d trial` : 'trial'}
            </span>
        );
    }
    if (planStatus === 'active') {
        return (
            <span className="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-700 dark:border-emerald-700/30 dark:bg-emerald-900/20 dark:text-emerald-400">
                {plan}
            </span>
        );
    }
    if (planStatus === 'past_due') {
        return (
            <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:border-amber-700/30 dark:bg-amber-900/20 dark:text-amber-400">
                {plan} · past due
            </span>
        );
    }
    if (planStatus === 'suspended') {
        return (
            <span className="rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-[10px] font-semibold text-red-700 dark:border-red-700/30 dark:bg-red-900/20 dark:text-red-400">
                {plan} · suspended
            </span>
        );
    }
    return (
        <span className="border-border bg-muted/50 text-muted-foreground rounded-full border px-2 py-0.5 text-[10px] font-semibold">
            {plan}
            {planStatus === 'canceled' ? ' · canceled' : ''}
        </span>
    );
}