import React from 'react'
import CatalogueCard from './CatalogueCard.component'
import { Meta, StoryObj } from '@storybook/react'

import Flex from '../../atoms/Flex/Flex.component'
import { ICatalogueCard } from './CatalogueCard.interface'

export default {
  title: 'Backlog/CatalogueCard',
  component: CatalogueCard,
  args: {
    children: 'Button',
    buttonLabel: 'Download'
  }
} as Meta

export const card: StoryObj<Partial<ICatalogueCard>> = {
  render: args => (
    <Flex gap={'16px'}>
      <CatalogueCard
        buttonLabel='DOWNLOAD'
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
            alt="Empty state"
          />
        }
        linkElement={<a href="https://google.com" className="linker"></a>}
      ></CatalogueCard>
    </Flex>
  )
}