import { ts } from '../../i18n/server';
import { ChevronIcon } from './icons/ChevronIcon';

interface CollapsibleGroupHeaderProps {
  name: string;
  expanded: boolean;
  onToggle: () => void;
  className?: string;
  children?: React.ReactNode;
}

export function CollapsibleGroupHeader({
  name,
  expanded,
  onToggle,
  className = '',
  children,
}: CollapsibleGroupHeaderProps) {
  return (
    <button
      onClick={onToggle}
      className={`w-full cursor-pointer flex items-center justify-between border-b border-warm-300 dark:border-warm-700 ${className}`}
    >
      <span>{ts(name)}</span>
      <div className="flex items-center gap-1">
        {children}
        <ChevronIcon direction={expanded ? 'down' : 'right'} className="w-4 h-4" />
      </div>
    </button>
  );
}
