"use client";

import Link from "next/link";
import { useLanguage } from "@/lib/i18n/context";

const STEP_KEYS = ["panier", "commander", "confirmation"] as const;

export default function SuiviHeader({ name, orderCount }: { name: string; orderCount: number }) {
  const { t } = useLanguage();
  const STEPS = t.commander.steps;

  return (
    <div className="space-y-6">
      {/* Breadcrumb */}
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-1 sm:gap-2">
          {STEPS.map((step, i) => (
            <div key={STEP_KEYS[i]} className="flex items-center gap-1 sm:gap-2">
              <div className={`flex items-center gap-1 sm:gap-1.5 ${i < 2 ? "opacity-40" : "opacity-100"}`}>
                <div className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center text-[9px] sm:text-[10px] font-bold flex-shrink-0 ${
                  i === 2 ? "bg-brand-dark text-brand-off-white" : "bg-brand-dark/20 text-brand-dark"
                }`}>
                  {i + 1}
                </div>
                <span className={`text-[10px] sm:text-xs font-bold tracking-wide ${i === 2 ? "text-brand-dark" : "text-brand-dark/50"}`}>
                  {step}
                </span>
              </div>
              {i < STEPS.length - 1 && (
                <div className="w-4 sm:w-8 h-px bg-brand-dark/20" />
              )}
            </div>
          ))}
        </div>
        <Link
          href="/produits"
          className="hidden sm:block text-brand-dark/50 hover:text-brand-dark text-xs font-semibold transition-colors flex-shrink-0"
        >
          {t.suivi.continueShopping}
        </Link>
      </div>

      {/* Page title */}
      <div>
        <h1
          className="text-brand-dark text-3xl font-bold"
          style={{ fontFamily: "var(--font-space,sans-serif)" }}
        >
          {t.suivi.title}
        </h1>
        <p className="text-brand-dark/40 text-sm mt-1">
          {t.suivi.hello} {name} — {orderCount} {orderCount !== 1 ? t.suivi.orders : t.suivi.order}
        </p>
      </div>
    </div>
  );
}