import React from 'react'
import ProductCard from './ProductCard.component'
import { StoryObj } from '@storybook/react'
import { IProductCard } from './ProductCard.interface'
import Flex from '../../atoms/Flex/Flex.component'
import Button from '@/components/atoms/Button'
import Icon from '@/components/atoms/Icon'
export default {
  title: 'Backlog/ProductCard',
  component: ProductCard,
  args: {
    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"
      />
    )
  }
}

export const Product: StoryObj<Partial<IProductCard>> = {
  render: args => {
    return (
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '16px'
        }}
      >
        <ProductCard name={'Archi Sketch'}></ProductCard>
        <ProductCard
          wishlistButton={
            <Button
              variant="primary"
              theme="dark"
              size="small"
              rightIcon={<Icon icon="icon-book" />}
              onClick={() => alert('ACTION')}
            />
          }
          imageElement={args.imageElement}
          name={`NEW IN.00.131 DOOR LEVER HANDLE`}
        />
      </div>
    )
  }
}