"use client";

import { IconChevronDown } from "@tabler/icons-react";
import { useState } from "react";

interface HowToStep {
  name: string;
  text: string;
}

interface HowToAccordionProps {
  steps: HowToStep[];
  title?: string;
}

export default function HowToAccordion({
  steps,
  title = "Les étapes",
}: HowToAccordionProps) {
  const [isOpen, setIsOpen] = useState(false);

  if (!steps || steps.length === 0) return null;

  return (
    <div className="my-8 max-w-2xl mx-auto">
      <div className="border border-gray-100 rounded-lg bg-white">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="flex items-center justify-between w-full p-4 text-left"
          aria-expanded={isOpen}
        >
          <span className="text-sm font-semibold text-black uppercase">
            {title}
          </span>
          <IconChevronDown
            className={`w-5 h-5 text-gray-900 transition-transform duration-200 ${
              isOpen ? "rotate-180" : ""
            }`}
          />
        </button>

        {isOpen && (
          <div className="px-4 pb-4">
            {steps.map((step, i) => (
              <div key={i} className="relative flex gap-3">
                {/* Timeline */}
                <div className="flex flex-col items-center shrink-0">
                  <div className="flex items-center justify-center w-7 h-7 rounded-full bg-orange-600 text-white text-xs font-semibold">
                    {i + 1}
                  </div>
                  {i < steps.length - 1 && (
                    <div className="w-px flex-1 bg-gray-200 min-h-[16px]" />
                  )}
                </div>

                {/* Content */}
                <div className="pb-4 min-w-0">
                  <p className="text-sm font-semibold text-gray-900 m-0">
                    {step.name}
                  </p>
                  <p className="text-sm text-gray-600 mt-1 m-0 leading-relaxed">
                    {step.text}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}