"use client";

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

import { Button } from "@/components/ui/button";

export function PricingFreeBanner() {
  const t = useTranslations("auto.componentsSectionsPricingFreeBanner");

  return (
    <div className="flex flex-col items-start justify-between gap-6 rounded-xl border border-gray-100 bg-white px-6 py-6 shadow-sm sm:flex-row sm:items-center sm:px-8">
      <div className="max-w-xl">
        <h3 className="font-heading text-lg font-bold text-neutral-900 sm:text-xl">
          {t("title")}
        </h3>
        <p className="mt-2 text-sm leading-relaxed text-neutral-600 sm:text-[15px]">
          {t("description")}
        </p>
      </div>
      <Button
        variant="outline"
        size="lg"
        className="shrink-0 rounded-lg border-2 border-rf-blue bg-white px-8 text-rf-blue hover:bg-rf-blue-light"
        asChild
      >
        <Link href="/auth?tab=sign-up">{t("ctaLabel")}</Link>
      </Button>
    </div>
  );
}
