Accordion Transition

import { useState } from "react";

const items = [
  { title: "Typography", detail: "System font stack with Tailwind typography classes. Support for headings, paragraphs, lists, and block quotes." },
  { title: "Spacing", detail: "Consistent spacing scale based on Tailwind's default. Padding, margin, and gap utilities for layout control." },
  { title: "Colors", detail: "Extended color palette with semantic tokens. Dark mode variants for each color using Tailwind dark: prefix." },
];

export function AccordionTransition() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <div className="max-w-xl mx-auto py-16 px-4">
      <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">Design System</h2>
      <div className="space-y-2">
        {items.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i}>
              <button
                className={`w-full flex items-center justify-between px-5 py-4 rounded-xl text-left transition-all duration-300 ${
                  isOpen ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-200' : 'bg-white text-gray-900 border border-gray-200 hover:border-indigo-300'
                }`}
                onClick={() => setOpen(isOpen ? null : i)}
              >
                <span className="font-semibold">{item.title}</span>
                <svg className={`w-5 h-5 transition-all duration-500 ${isOpen ? 'rotate-180' : 'text-gray-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div className={`overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] ${
                isOpen ? 'max-h-60 opacity-100 mt-2' : 'max-h-0 opacity-0 mt-0'
              }`}>
                <div className="px-5 py-4 bg-gray-50 rounded-xl border border-gray-100 text-gray-600 text-sm leading-relaxed">{item.detail}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}