import { useState } from 'react';
import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn.ts';

interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  title: ReactNode;
  actions?: ReactNode;
  defaultOpen?: boolean;
  contentClassName?: string;
  children: ReactNode;
}

export function Section({ title, actions, defaultOpen = true, className, contentClassName, children, ...props }: SectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className={cn('border-b border-wing-border', className)} {...props}>
      <div
        className="shrink-0 flex cursor-pointer items-center justify-between gap-2 px-3 py-2.5 select-none"
        onClick={() => setIsOpen((v) => !v)}
      >
        <span className="text-[9px] font-bold uppercase tracking-[1.5px] text-wing-muted">
          {title}
        </span>
        {actions && (
          <span onClick={(e) => e.stopPropagation()} className="flex items-center gap-1.5">
            {actions}
          </span>
        )}
      </div>
      {isOpen && (
        <div className={cn('px-3 pb-2.5', contentClassName)}>
          {children}
        </div>
      )}
    </div>
  );
}
