import { Meta, StoryObj } from '@storybook/react'

import Flex from '../../atoms/Flex/Flex.component'
import { IStoreCard } from './StoreCard.interface'
import React from 'react'
import StoreCard from '../StoreCard/StoreCard.component'

const image = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="/assets/placeholder.png"
    alt="Empty state"
  />
)


export default {
  title: 'Backlog/StoreCard',
  component: StoreCard
} as Meta

export const Simple: StoryObj<Partial<IStoreCard>> = {
  render: args => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(45%, 1fr) ',
        gap: '16px'
      }}
    >
      <StoreCard {...args}></StoreCard>
      <StoreCard {...args}></StoreCard>
      <StoreCard {...args}></StoreCard>
      <StoreCard {...args}></StoreCard>
    </div>
  ),
  args: {
    imageElements: [image, image, image],
    title: "My custom title" || "",
    description: "Comércio e Indústria de Ferragens S.A<br />Rua Mimosas 849/851, Zona Industrial Mimosas S. Pedro da Cova / 4510-329 Gondomar — Portugal"
  }
}