"use client";

import { useState } from "react";
import type { TechSpecRow } from "@/lib/product-galleries";
import { ProductTechSpecs } from "@/components/product/ProductTechSpecs";

type Props = {
  items: TechSpecRow[];
  heading?: string | null;
};

export function SpecsAccordion({ items, heading = null }: Props) {
  const [open, setOpen] = useState(false);

  return (
    <div className="mt-5 border border-black/15 bg-ot-cream">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left cursor-pointer hover:bg-black/[0.02] transition"
      >
        <span
          className="ot-label-condensed tracking-[0.16em] text-ot-ink"
          style={{ letterSpacing: "0.16em" }}
        >
          Especificaciones
        </span>
        <span
          className={`text-ot-ink text-lg leading-none transition-transform duration-200 ${
            open ? "rotate-45" : ""
          }`}
          aria-hidden
        >
          +
        </span>
      </button>
      {open ? (
        <div className="border-t border-black/10 px-4 pb-4 pt-3">
          <ProductTechSpecs items={items} hideTitle heading={heading} />
        </div>
      ) : null}
    </div>
  );
}