Accordion Radio

import { useState } from "react";

const items = [
  { title: "Profile Settings", body: "Manage your personal information, email preferences, and account security settings all in one place." },
  { title: "Billing & Plan", body: "View your current subscription plan, update payment methods, and download invoices for your records." },
  { title: "Team Members", body: "Invite colleagues, assign roles, and manage permissions for your shared workspace." },
  { title: "Notifications", body: "Configure email, push, and in-app notification preferences for different event types." },
];

export function AccordionRadio() {
  const [active, setActive] = useState<number>(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">Settings</h2>
      <div className="space-y-2">
        {items.map((item, i) => {
          const isOpen = active === i;
          return (
            <div key={i} className={`rounded-lg border transition-all duration-200 ${isOpen ? 'border-blue-500 bg-blue-50/50 shadow-sm' : 'border-gray-200 bg-white'}`}>
              <button
                className="w-full flex items-center justify-between px-5 py-3.5 focus:outline-none group"
                onClick={() => setActive(i)}
              >
                <div className="flex items-center gap-3">
                  <span className={`w-2 h-2 rounded-full transition-colors ${isOpen ? 'bg-blue-500' : 'bg-gray-300'}`} />
                  <span className={`font-medium transition-colors ${isOpen ? 'text-blue-900' : 'text-gray-700 group-hover:text-gray-900'}`}>
                    {item.title}
                  </span>
                </div>
                <svg className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180 text-blue-500' : '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-300 ease-in-out ${isOpen ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'}`}>
                <div className="px-5 pb-4 pt-1 text-sm text-gray-600 leading-relaxed pl-10">{item.body}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}