"use client";

import { useTranslations } from "next-intl";
import Link from "next/link";

interface FreeTrialBannerProps {
  trialEnd: string;
  upgradeHref: string;
}

export default function FreeTrialBanner({ trialEnd, upgradeHref }: FreeTrialBannerProps) {
  const t = useTranslations("freeTrial");

  const now = new Date();
  const end = new Date(trialEnd);
  const daysRemaining = Math.max(0, Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)));

  return (
    <div className="w-full px-4 py-2.5 text-sm bg-[#3B9EC9]/5 border-b border-[#3B9EC9]/20">
      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4 flex-wrap">
        <span className="font-medium text-[#3B9EC9]">
          {t("trialActive", { days: daysRemaining })}
        </span>
        <Link
          href={upgradeHref}
          className="text-xs font-semibold px-3 py-1 rounded-full bg-[#3B9EC9] text-white hover:bg-[#2D8AB5] transition whitespace-nowrap"
        >
          {t("upgrade")}
        </Link>
      </div>
    </div>
  );
}