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

const STYLE = {
    info: 'border-blue-200 bg-blue-50 text-blue-900',
    warning: 'border-amber-200 bg-amber-50 text-amber-900',
    danger: 'border-red-200 bg-red-50 text-red-900',
};

/** "Trial ends in 3 days": always visible during a trial, escalating colour as it runs out. */
export default function TrialCountdown({ trial }) {
    if (!trial) return null;

    return (
        <div className={`flex flex-wrap items-center justify-between gap-3 rounded-md border px-4 py-3 text-sm ${STYLE[trial.level] ?? STYLE.info}`}>
            <div className="flex items-center gap-3">
                <span className="rounded-full bg-white/70 px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide">Free trial</span>
                <span>{trial.message}</span>
            </div>
            <Link href={route('billing.index')} className="font-semibold underline">Choose a plan</Link>
        </div>
    );
}