import { Meta, StoryObj } from '@storybook/react-webpack5';
import { Button, withId, type WithIdProps } from '..';

type Story = StoryObj<typeof withId>;

type DescribedButtonProps = { id?: string };
type DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;

function CustomButton({ id }: DescribedButtonWithIdProps) {
  return (
    <>
      <Button v2 aria-describedby={id}>
        Continue
      </Button>

      <p id={id} className="text-xs-center m-t-2">
        Enter an amount in either GBP or PLN
        <br />
        This paragraph has id of <code>{id}</code>
      </p>
    </>
  );
}
const DescribedButton = withId<DescribedButtonProps>(CustomButton);
DescribedButton.displayName = 'DescribedButton';

export default {
  component: DescribedButton,
  title: 'HoCs/withId',
  tags: ['!manifest'],
} satisfies Meta<typeof withId>;

export const WithoutId: Story = {};

export const WithCustomId: Story = {
  args: {
    id: 'myId',
  },
};

export const WithEmptyId: Story = {
  args: {
    id: '',
  },
};