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

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

export default {
  title: 'Backlog/FeaturedCollectionCard',
  component: FeaturedCollectionCard,
  args: {
    title: 'Art Deco',
    linkElement: <a href="https://google.com" className="linker"></a>,
    imageElement: (
      <img
        width="100%"
        height="100%"
        sizes="100vw"
        decoding="async"
        src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
        alt="Empty state"
      />
    )
  }
} as Meta

export const card: StoryObj<IFeaturedCollectionCard> = {
  render: args => (
    <Flex gap={'16px'}>
      <FeaturedCollectionCard
        imageElement={args.imageElement}
        title={args.title}
      >
        {args.linkElement}
      </FeaturedCollectionCard>
      <FeaturedCollectionCard
        imageElement={args.imageElement}
        title={args.title}
      >
        {args.linkElement}
      </FeaturedCollectionCard>
    </Flex>
  )
}