"use client";

import { useTranslation } from "@turbostarter/i18n";
import { cn } from "@turbostarter/ui";
import { buttonVariants } from "@turbostarter/ui-web/button";

import { BusinessCard } from "./business-card";

import type { BusinessData } from "./wizard";

interface StepConfirmProps {
  business: BusinessData;
  onConfirm: () => void;
  onBack: () => void;
}

export const StepConfirm = ({
  business,
  onConfirm,
  onBack,
}: StepConfirmProps) => {
  const { t } = useTranslation("marketing");

  return (
    <div className="flex w-full max-w-lg flex-col items-center gap-6">
      <div className="text-center">
        <h2 className="text-foreground text-2xl font-semibold tracking-tight sm:text-3xl">
          {t("wizard.confirm.title")}
        </h2>
        <p className="text-muted-foreground mt-2 text-sm">
          {t("wizard.confirm.description")}
        </p>
      </div>

      <BusinessCard business={business} selected className="pointer-events-none" />

      <div className="flex items-center gap-3 text-sm">
        <span className="text-muted-foreground">
          {t("wizard.confirm.reviews", { count: business.review_count })}
        </span>
        <span className="text-muted-foreground">·</span>
        <span className="text-muted-foreground">
          {t("wizard.confirm.rating", { rating: business.rating })}
        </span>
        {business.maps_url && (
          <>
            <span className="text-muted-foreground">·</span>
            <a
              href={business.maps_url}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              {t("wizard.confirm.viewOnGoogle")}
            </a>
          </>
        )}
      </div>

      <div className="flex w-full flex-col gap-3">
        <button
          type="button"
          onClick={onConfirm}
          className={cn(buttonVariants({ size: "lg" }), "w-full")}
        >
          {t("wizard.confirm.confirmButton")}
        </button>
        <button
          type="button"
          onClick={onBack}
          className="text-muted-foreground hover:text-foreground text-center text-sm transition-colors"
        >
          {t("wizard.confirm.wrongBusiness")}
        </button>
      </div>
    </div>
  );
};
