import type { Meta, StoryObj } from '@storybook/react'
import { colors } from '@/styles/variables'
import React from 'react'
import FinishesCard from './FinishesCard.component'
import { IFinishesCard } from './FinishesCard.interface'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Backlog/FinishesCard',
  component: FinishesCard
} as Meta

const image = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="/assets/placeholder.png"
    alt="Empty state"
  />
)
const image2 = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="https://images.pexels.com/photos/19799429/pexels-photo-19799429.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
    alt="Empty state"
  />
)

export const Simple: StoryObj<Partial<IFinishesCard>> = {
  render: args => (
    <div
      style={{
        backgroundColor: `${colors.gray90}`,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(20%, 1fr) ',
        gap: '16px'
      }}
    >
      <FinishesCard {...args} imageElement={image2}></FinishesCard>
      <FinishesCard {...args}></FinishesCard>
      <FinishesCard {...args}></FinishesCard>
      <FinishesCard {...args} description={"Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique."}></FinishesCard>
    </div >
  ),
  args: {
    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageElement: image,
    description:
      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.',
    showMoreLabel: 'See More',
    showLessLabel: 'See Less',
  }
}