Accordion With Icon

import { useState } from "react";

const sections = [
  { icon: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z", title: "Cloud Storage", content: "Store and access your files from anywhere with end-to-end encryption. Syncs automatically across all your devices." },
  { icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z", title: "Security", content: "Enterprise-grade security with SOC 2 compliance. Two-factor authentication and granular permission controls included." },
  { icon: "M13 10V3L4 14h7v7l9-11h-7z", title: "Performance", content: "Lightning-fast CDN with 99.99% uptime SLA. Automatic image optimization, caching, and global edge deployment." },
];

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

  const toggle = (i: number) => {
    setOpen(prev => prev.includes(i) ? prev.filter(v => v !== i) : [...prev, i]);
  };

  return (
    <div className="max-w-2xl mx-auto py-16 px-4">
      <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Features</h2>
      <div className="space-y-3">
        {sections.map((sec, i) => {
          const isOpen = open.includes(i);
          return (
            <div key={i} className={`border rounded-xl overflow-hidden transition-all ${isOpen ? 'border-indigo-200 bg-indigo-50/40 shadow-sm' : 'border-gray-200 bg-white hover:border-gray-300'}`}>
              <button className="w-full px-5 py-4 flex items-center gap-4 focus:outline-none" onClick={() => toggle(i)}>
                <svg className={`w-6 h-6 shrink-0 transition-colors ${isOpen ? 'text-indigo-600' : 'text-gray-400'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d={sec.icon} />
                </svg>
                <span className="font-semibold text-gray-900 flex-1 text-left">{sec.title}</span>
                <svg className={`w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              <div className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`}>
                <div className="px-5 pb-4 pt-0 text-gray-600 leading-relaxed text-sm pl-16">{sec.content}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}