import { clsx } from '@trail-ui/shared-utils';
import { MenuSectionSlots, SlotsToClasses, menuSection } from '@trail-ui/theme';
import { ReactNode, useMemo } from 'react';
import type { SectionProps } from 'react-aria-components';
import { Header, MenuSection as AriaMenuSection } from 'react-aria-components';

export interface MenuSectionProps<T> extends SectionProps<T> {
  /**
   * The menu section title.
   */
  title?: ReactNode | string;
  /**
   * The menu section classNames.
   */
  classNames?: SlotsToClasses<MenuSectionSlots>;

  children: ReactNode;
}

export function MenuSection(props: MenuSectionProps<object>) {
  const { title, children, className, classNames, ...otherProps } = props;

  const slots = useMemo(() => menuSection(), []);
  const baseStyles = clsx(classNames?.base, className);

  return (
    <AriaMenuSection className={slots.base({ class: baseStyles })} {...otherProps}>
      <Header className={slots.header({ class: classNames?.header })}>{title}</Header>
      <>{children}</>
    </AriaMenuSection>
  );
}