import { Meta, StoryObj } from '@storybook/react-webpack5';
import { action } from 'storybook/actions';
import { Size } from '../common';
import AvatarView from '../avatarView';
import Tile from '.';
import { Illustration, type IllustrationProps } from '@wise/art';
import Image from '../image';

const LabelledIllustration = (props: IllustrationProps) => <Illustration {...props} />;
LabelledIllustration.displayName = 'Illustration';

const meta: Meta<typeof Tile> = {
  component: Tile,
  title: 'Internal/Tile',
  argTypes: {
    title: { control: 'text' },
    description: { control: 'text' },
    disabled: { control: 'boolean' },
    size: {
      control: 'radio',
      options: [Size.MEDIUM, Size.SMALL],
    },
    media: { control: false },
    href: { control: 'text' },
    onClick: { action: 'onClick' },
  },
  args: {
    media: (
      <Image
        alt="illustration"
        src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
      />
    ),
    title: 'Hank Miller',
    description: 'Click here to send money to Mr. Miller',
    disabled: false,
    href: '#href1',
    size: Size.MEDIUM,
    onClick: action('onClick'),
  },
};
export default meta;

type Story = StoryObj<typeof Tile>;

export const WithImage: Story = {};

export const WithAvatar: Story = {
  args: {
    media: <AvatarView profileName="Henry Morris" />,
  },
};