import type { Meta } from '@storybook/react';

import { DropdownMenu } from '.';
import { Button } from '../button';
import { Icon } from '../iconography';

export default {
  title: 'Components/DropdownMenu',
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
} as Meta<any>;

function ContentWithIcon() {
  return (
    <>
      <DropdownMenu.Label>View</DropdownMenu.Label>
      <DropdownMenu.Item>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon.Glasses width={24} height={24} />
          <span style={{ padding: '0 12px' }}>Nerdy</span>
        </div>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Icon.GraphQL width={24} height={24} />
          <span style={{ padding: '0 12px' }}>Developer</span>
        </div>
      </DropdownMenu.Item>
    </>
  );
}

export const WithOpenState = () => {
  return (
    <DropdownMenu.Root content={<ContentWithIcon />}>
      <Button prepend={<Icon.NailPolish width={20} height={20} />}>Pretty</Button>
    </DropdownMenu.Root>
  );
};
