import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { CountryButton, CountryButtonProps } from './CountryButton';

import { variants } from "@/constants.js"

export default {
  title: 'molecules/CountryButton',
  component: CountryButton,
  argTypes: {
    badgeVariant: {
      options: Object.values(variants),
      control: {
        type: 'select',
      },
    },
    buttonVariant: {
      options: Object.values(variants),
      control: {
        type: 'select',
      },
    },
    buttonPresentation: {
      options: ['normal', 'outline', 'subtle'],
      control: {
        type: 'select',
      },
    },
  },
} as Meta;


const Template: StoryFn<CountryButtonProps> = (args) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
      {
        <span key={args.countryCode} style={{ margin: 16 }}>
          <CountryButton {...args} />
        </span>
      }
    </div>
  );
};

export const _CountryButton = Template.bind({});
_CountryButton.args = {
  countryCode: 'FJ',
};

export const _CountryBadgeButton = Template.bind({});
_CountryBadgeButton.args = {
  badge: '100',
  badgeVariant: 'primary',
  countryCode: 'TO',
};