import React from 'react'
import CategoriesCard from './CategoriesCard.component'
import { Meta, StoryObj } from '@storybook/react'
import { ICategoriesCard } from './CategoriesCard.interface'

import Button from '../../atoms/Button/Button.component'
import Icon from '../../atoms/Icon/Icon.component'
import Flex from '../../atoms/Flex/Flex.component'

export default {
  title: 'Backlog/CategoriesCard',
  component: CategoriesCard,
  args: {
    children: 'Button',
    linkElement: <a href="https://google.com" className="linker"></a>,
    buttonLabel: 'click',
    title: 'Handles'
  }
} as Meta

export const card: StoryObj<Partial<ICategoriesCard>> = {
  render: args =>

    <Flex gap={'16px'}>
      <CategoriesCard
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
            alt="Empty state"
          />
        }
        title={args.title}
        buttonLabel={args.buttonLabel}
        linkElement={args.linkElement}
      />
      <CategoriesCard
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
            alt="Empty state"
          />
        }
        title={args.title}
        buttonLabel={args.buttonLabel}
        linkElement={args.linkElement}
      />



    </Flex>


}