const DEFAULT_SPECS = [
  { label: "Silueta", value: "Vestido sin mangas, ajuste entallado" },
  { label: "Cierre", value: "Cremallera frontal completa, tipo deportivo" },
  { label: "Cuello", value: "Camisero, con vivo en contraste" },
  { label: "Falda", value: "Integrada, líneas limpias y femeninas" },
  { label: "Tejido", value: "Técnico premium, transpirable" },
  { label: "Cuidado", value: "Lavado a máquina en frío, no usar secadora" },
] as const;

type SpecRow = { label: string; value: string };

type Props = {
  className?: string;
  items?: SpecRow[];
  hideTitle?: boolean;
  /** Título editorial dentro del acordeón (ej. Tela técnica premium) */
  heading?: string | null;
};

export function ProductTechSpecs({
  className = "",
  items,
  hideTitle = false,
  heading = null,
}: Props) {
  const rows = items?.length ? items : DEFAULT_SPECS;

  return (
    <section className={className} aria-label="Ficha técnica">
      {!hideTitle ? (
        <h2 className="font-serif text-center text-sm tracking-[0.28em] uppercase text-ot-ink mb-6">
          Ficha técnica
        </h2>
      ) : null}
      {heading ? (
        <p
          className="mb-4 text-center text-[0.95rem] tracking-[0.14em] uppercase text-ot-ink font-semibold"
          style={{
            fontFamily:
              "var(--font-fraunces), Fraunces, Georgia, serif",
          }}
        >
          {heading}
        </p>
      ) : null}
      <dl className={hideTitle && !heading ? "" : "border-t border-black/10"}>
        {rows.map((row) => (
          <div
            key={`${row.label}-${row.value}`}
            className="grid grid-cols-1 sm:grid-cols-[minmax(7rem,9.5rem)_1fr] gap-1 sm:gap-8 py-3.5 border-b border-black/10 first:border-t first:border-black/10"
          >
            <dt
              className="text-[11px] tracking-[0.14em] uppercase font-semibold text-ot-ink"
              style={{
                fontFamily:
                  "var(--font-barlow-condensed), 'Barlow Condensed', sans-serif",
              }}
            >
              {row.label}
            </dt>
            <dd className="text-sm text-ot-ink/80 leading-snug">{row.value}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}