import React from 'react';
import type { AccordionItemProps } from '../../types';

export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
  <div className={`group relative bg-white rounded-2xl shadow-lg border border-gray-200 transition-all duration-300 overflow-hidden ${isOpen ? 'shadow-2xl border-blue-300 scale-[1.01]' : ''} hover:shadow-xl hover:border-blue-300`}>
    {/* Overlay effect on hover */}
    <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
    
    <div 
      className="relative z-10 p-6 sm:p-8 cursor-pointer flex items-center justify-between font-semibold text-gray-900 transition-all duration-200 text-base sm:text-lg select-none hover:text-blue-700"
      onClick={onToggle}
    >
      <div className="flex items-center flex-1 mr-4 font-heading">{title}</div>
      <span className={`text-xl sm:text-2xl transition-transform duration-300 text-blue-600 flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>
        ▼
      </span>
    </div>
    <div className={`relative z-10 transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-6 px-6 sm:pb-8 sm:px-8' : 'max-h-0'}`}>
      <div className="text-gray-700 leading-relaxed text-sm sm:text-base">
        {children}
      </div>
    </div>
  </div>
);
