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

import PromoCard from './PromoCard';
import PromoCardGroup from './PromoCardGroup';

const PromoCards = () => {
  return (
    <>
      <PromoCard
        title="Digital"
        description="A card that lives online and works anywhere. Easy, secure, and always on hand."
        type="radio"
        value="digital"
        id="digital"
        imageAlt=""
        indicatorLabel="Free"
        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
      />
      <PromoCard
        title="Standard"
        description="Spend and withdraw money around the world. In your wallet and on your side."
        type="radio"
        value="standard"
        id="standard"
        imageAlt=""
        indicatorLabel="7 GBP"
        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
      />
      <PromoCard
        title="Eco"
        description="A debit card made to biodegrade — no toxic gases, no toxic fees."
        type="radio"
        value="eco"
        id="eco"
        imageAlt=""
        indicatorLabel="9 GBP"
        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
      />
    </>
  );
};

const meta: Meta<typeof PromoCardGroup> = {
  component: PromoCardGroup,
  title: 'Layouts/PromoCardGroup',
};

export default meta;
type Story = StoryObj<typeof PromoCardGroup>;

export const Default: Story = {
  args: {
    children: <PromoCards />,
  },
};

export const DefaultChecked: Story = {
  args: {
    children: <PromoCards />,
    defaultChecked: 'standard',
  },
};

export const Disabled: Story = {
  args: {
    children: <PromoCards />,
    isDisabled: true,
  },
};