import React from 'react'
import ProjectCard from './ProjectCard.component'
import { StoryObj } from '@storybook/react'
import { IProjectCard } from './ProjectCard.interface'
import Flex from '../../atoms/Flex/Flex.component'
export default {
  title: 'Backlog/ProjectCard',
  component: ProjectCard,
  args: {
    children: 'ButonMy'
    // linkElement: <a href="https://google.com" className="linker"></a>
  }
}

export const Project: StoryObj<Partial<IProjectCard>> = {
  render: args => (
    <Flex gap={'16px'}>
      <ProjectCard
        imageElement={<img
          width="100%"
          height="100%"
          sizes="100vw"
          decoding="async"
          src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
          alt="Empty state" />}
        title={'Edificio Essenza'}
        buttonLabel={'EXPLORE'}
      />
      <ProjectCard
        imageElement={<img
          width="100%"
          height="100%"
          sizes="100vw"
          decoding="async"
          src="/assets/placeholder.jpg"
          alt="Empty state" />}
        title={'Edificio Essenza1'}
        buttonLabel={'EXPLORE'}
      />
      <ProjectCard
        imageElement={<img
          width="100%"
          height="100%"
          sizes="100vw"
          decoding="async"
          src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
          alt="Empty state" />}
        title={'Edificio Essenza2'}
        buttonLabel={'EXPLORE'}
      />
    </Flex >
  )
}