import type { Args } from '@storybook/react-webpack5';
import { Illustration } from '@wise/art';

import Display from '../display';

import Carousel, { type CarouselCard } from './Carousel';

export default {
  component: Carousel,
  title: 'Navigation/Carousel',
};

const carouselCards: CarouselCard[] = [
  {
    id: 'YOUR_INVOICE',
    type: 'button',
    onClick: () => {
      console.log('Clicked on button');
    },
    content: (
      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
        <div style={{ position: 'absolute' }}>
          <Illustration disablePadding name="globe" size="small" alt="" />
        </div>
        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
          <Display type="display-small">Here there, everywhere</Display>
        </div>
      </div>
    ),
  },
  {
    id: 'YOUR_WEBSITE',
    type: 'promo',
    onClick: () => {
      console.log('hi');
    },
    href: 'http://wise.com',
    title: 'Wise',
    description: 'The best way to move money internationally',
  },
  {
    id: 'SHOP_OR_STALL',
    type: 'anchor',
    href: 'https://wise.com',
    hrefTarget: '_blank',
    onClick: () => {},
    styles: {
      backgroundImage:
        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
      backgroundSize: 'cover',
    },
    content: <Display type="display-small">Get Quick Pay</Display>,
  },
];

export const CarouselDefault = {
  render: (args: Args) => {
    return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
  },
  args: {},
};