import Link from "next/link";
import { ChevronRight } from "lucide-react";

export function CommerceHeading({ step, title, description }: { step: 1 | 2 | 3; title: string; description: string }) {
  return <section className="commerce-heading section-padding"><p className="eyebrow">FASHION MART / {step === 1 ? "YOUR SELECTION" : step === 2 ? "ALMOST THERE" : "THANK YOU"}</p><h1>{title}</h1><p>{description}</p><ol className="commerce-steps" aria-label="Checkout progress">{["Shopping bag", "Checkout", "Confirmation"].map((label, index) => <li key={label} aria-current={index + 1 === step ? "step" : undefined} className={index + 1 <= step ? "step-reached" : ""}><span className="step-number">{index + 1}</span>{index + 1 < step && index < 2 ? <Link href={index === 0 ? "/cart" : "/checkout"}>{label}</Link> : <span>{label}</span>}{index < 2 && <ChevronRight size={13} />}</li>)}</ol></section>;
}