import React, { useState } from 'react';

const Accordion = ({ items }) => {
  const [openIndex, setOpenIndex] = useState(0); // Start with first item open

  const toggleItem = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div className="w-full">
      {items.map((item, index) => (
        <div 
          key={index} 
          className={`mb-4 border border-dark-600 rounded-lg overflow-hidden transition-all duration-300 ${
            openIndex === index ? 'shadow-lg' : 'shadow'
          }`}
        >
          <button
            onClick={() => toggleItem(index)}
            className={`w-full flex items-center justify-between text-left p-5 font-medium transition-colors ${
              openIndex === index 
                ? 'bg-dark-700 text-white' 
                : 'bg-dark-800 text-gray-300 hover:bg-dark-700'
            }`}
            aria-expanded={openIndex === index}
          >
            <span className="text-lg">{item.title}</span>
            <svg 
              xmlns="http://www.w3.org/2000/svg" 
              className={`h-5 w-5 transition-transform duration-300 ${openIndex === index ? 'transform 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 ease-in-out ${
              openIndex === index ? 'max-h-96' : 'max-h-0'
            }`}
          >
            <div className="p-5 bg-dark-700 border-t border-dark-600">
              <p className="text-gray-300 mb-4">{item.content}</p>
              
              <div className="mt-4 border-l-4 border-primary-500 pl-4">
                <p className="text-primary-400 font-semibold mb-2">Our Solution:</p>
                <p className="text-gray-300">{item.solution}</p>
              </div>
              
              {item.resources && (
                <div className="mt-4 pt-4 border-t border-dark-600">
                  <p className="text-white font-medium mb-2">Helpful Resources:</p>
                  <ul className="list-disc list-inside text-primary-400 space-y-1">
                    {item.resources.map((resource, i) => (
                      <li key={i}>
                        <a href={resource.url} className="hover:text-primary-300 transition-colors" target="_blank" rel="noopener noreferrer">
                          {resource.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Accordion;