import { cn } from "@/lib/utils";
import { __ } from "@wordpress/i18n";
import { GitCompareArrows } from "lucide-react";

/** Wizard header: name, step progress and "Skip, use defaults". */
const WizardHeader = ({ steps, current, onSkip }) => (
  <header className="ino:border-b ino:border-border ino:bg-background ino:px-8 ino:py-4">
    <div className="ino:mx-auto ino:flex ino:max-w-5xl ino:flex-wrap ino:items-center ino:justify-between ino:gap-4">
      <div className="ino:flex ino:items-center ino:gap-2.5 ino:font-semibold">
        <span className="ino:flex ino:size-8 ino:items-center ino:justify-center ino:rounded-lg ino:bg-foreground ino:text-background">
          <GitCompareArrows size={18} aria-hidden="true" />
        </span>
        {__("Better Compare setup", "product-comparison-for-woocommerce")}
      </div>
      <ol
        aria-label={__("Setup progress", "product-comparison-for-woocommerce")}
        className="ino:m-0 ino:flex ino:list-none ino:items-center ino:gap-3 ino:p-0"
      >
        {steps.map((label, index) => (
          <li
            key={label}
            aria-current={index === current ? "step" : undefined}
            className={cn(
              "ino:flex ino:items-center ino:gap-2 ino:text-sm",
              index === current
                ? "ino:font-semibold ino:text-foreground"
                : "ino:text-muted-foreground",
            )}
          >
            <span
              className={cn(
                "ino:flex ino:size-6 ino:items-center ino:justify-center ino:rounded-full ino:border ino:text-xs",
                index <= current
                  ? "ino:border-primary ino:bg-primary ino:text-primary-foreground"
                  : "ino:border-border",
              )}
            >
              {index + 1}
            </span>
            {label}
          </li>
        ))}
      </ol>
      <button
        type="button"
        onClick={onSkip}
        className="ino:cursor-pointer ino:border-0 ino:bg-transparent ino:text-sm ino:text-muted-foreground ino:underline"
      >
        {__("Skip, use defaults", "product-comparison-for-woocommerce")}
      </button>
    </div>
  </header>
);

export default WizardHeader;