import type { MenuOption } from '~/src/ui/components/menu';
import type { ReactNode } from 'react';

import { Menu } from '~/src/ui/components/menu';
import { Layout } from '~/src/ui/layouts/layout';
import { Clickable } from '~/src/ui/primitives/clickable';
import { Text } from '~/src/ui/primitives/text';
import { CollapsiblePanel } from './CollapsiblePanel';
import { CollapsibleRoot } from './CollapsibleRoot';
import { CollapsibleTrigger } from './CollapsibleTrigger';
import { CollapsibleSize } from './types';

interface CollapsibleProps {
  title?: string;
  icon?: ReactNode;
  children: ReactNode;
  size?: CollapsibleSize;
  menuOptions?: MenuOption[];
}

export const Collapsible = ({
  children,
  size = 'medium',
  title,
  icon,
  menuOptions,
}: CollapsibleProps) => {
  return (
    <CollapsibleRoot>
      <CollapsibleTrigger size={size}>
        <Layout gap="4" justify="space-between">
          <Layout gap="2" align="center">
            {icon}
            {title && (
              <Text variant={size === 'small' ? 'body-small' : 'body'}>
                {title}
              </Text>
            )}
          </Layout>
          <Layout gap="2" align="center" shrink>
            {menuOptions && (
              <Clickable>
                <Menu options={menuOptions} />
              </Clickable>
            )}
          </Layout>
        </Layout>
      </CollapsibleTrigger>
      <CollapsiblePanel size={size}>{children}</CollapsiblePanel>
    </CollapsibleRoot>
  );
};