import { StoryObj } from '@storybook/react'
import CollectionCards from './CollectionCard.component'
import { ICollectionCard } from './CollectionCard.interface'
import Flex from '../../atoms/Flex/Flex.component'
import React from 'react'
export default {
  title: 'BackLog/CollectionsCard',
  component: CollectionCards,
  args: {
    linkElement: <a href="https://google.com" className="linker"></a>
  }
}

export const Regular: StoryObj<Partial<ICollectionCard>> = {
  render: args => (
    <Flex gap={'16px'}>
      <CollectionCards
        title={'NATURE COLLECTION'}
        description={'WOOD NATURE'}
        backgroundColor="#256535"
        type={'regular'}
        buttonLabel={'DISCOVERY COLLECTION'}
      ></CollectionCards>
    </Flex>
  )
}
export const Cover: StoryObj<Partial<ICollectionCard>> = {
  render: args => (
    <Flex gap={'16px'}>
      <CollectionCards
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="/assets/collections.jpg"
            alt="Empty state"
          />
        }
        type={'cover'}
        buttonLabel={'DISCOVERY COLLECTION'}
      ></CollectionCards>
    </Flex>
  )
}
export const All: StoryObj<Partial<ICollectionCard>> = {
  render: args => (
    <Flex gap={'16px'}>
      <CollectionCards
        title={'NATURE COLLECTION'}
        description={'WOOD NATURE'}
        backgroundColor="#256535"
        type={'regular'}
        buttonLabel={'DISCOVERY COLLECTION'}
      ></CollectionCards>
      <CollectionCards
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="/assets/collections.jpg"
            alt="Empty state"
          />
        }
        type={'cover'}
        buttonLabel={'DISCOVERY COLLECTION'}
      ></CollectionCards>
    </Flex>
  )
}