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

import NotificationDot from './NotificationDot';

type PagePropsAndCustomArgs = Pick<
  React.ComponentProps<typeof NotificationDot>,
  'className' | 'children'
>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/NotificationDot',
  component: NotificationDot,
  argTypes: {
    className: {
      control: { type: 'text' },
    },
    children: {
      control: { type: 'text' },
    },
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {};

export const Content: Story = {
  args: {
    children: '69',
  },
};

export const Customized: Story = {
  args: {
    className: 'text-black bg-white',
    children: '20',
  },
};

export const DifferentWidthContent: Story = {
  render: ({ children, ...restArgs }) => (
    <div className='grid grid-cols-[repeat(auto-fit,minmax(0,max-content))] items-start justify-start gap-2'>
      <div>
        <NotificationDot {...restArgs}>{children || 9}</NotificationDot>
      </div>
      <div>
        <NotificationDot {...restArgs}>{children || 99}</NotificationDot>
      </div>
      <div>
        <NotificationDot {...restArgs}>{children || 999}</NotificationDot>
      </div>
      <div>
        <NotificationDot {...restArgs}>{children || '9999+'}</NotificationDot>
      </div>
    </div>
  ),
};