import React from 'react';
import CountBadge from './CountBadge.tsx';

const AccordionItem: React.FC<{
  id: string;
  title: string;
  count: number;
  icon: string;
  level: 'location' | 'coop' | 'floor';
  children?: React.ReactNode;
  isOpen: boolean;
  onToggle: (id: string) => void;
}> = ({ id, title, count, icon, level, children, isOpen, onToggle }) => {
  const levelStyles = {
    location: {
      button: 'bg-gray-100 hover:bg-gray-200',
      icon: 'text-gray-600',
      title: 'text-lg font-bold text-gray-800',
    },
    coop: {
      button: 'bg-white hover:bg-gray-50',
      icon: 'text-gray-500',
      title: 'font-semibold text-gray-700',
    },
    floor: {
      button: 'bg-white',
      icon: 'text-gray-500',
      title: 'font-medium text-gray-700',
    },
  };

  const styles = levelStyles[level];

  return (
    <div className={level === 'coop' ? 'pl-4' : ''}>
      <div
        className={`flex items-center justify-between p-3 rounded-md transition-colors ${styles.button}`}
      >
        <div className="flex items-center gap-4 flex-grow truncate">
          <i className={`fa-solid ${icon} w-6 text-center text-xl ${styles.icon}`}></i>
          <span className={`truncate ${styles.title}`} title={title}>
            {title}
          </span>
        </div>
        <div className="flex items-center gap-4 flex-shrink-0">
          <CountBadge count={count} />
          {children && (
            <button
              onClick={() => onToggle(id)}
              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-300/50"
            >
              <i
                className={`fa-solid fa-chevron-down transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
              ></i>
            </button>
          )}
        </div>
      </div>
      {isOpen && <div className="mt-2">{children}</div>}
    </div>
  );
};

export default AccordionItem;