import React from 'react'
import { Meta, StoryObj } from '@storybook/react'
import TeamsCard from './TeamsCard.component'
import { ITeamsCard } from './TeamsCard.interface'

export default {
  title: 'Backlog/TeamsCard',
  component: TeamsCard,
  args: {
    name: 'Catarina Rodrigues',
    role: 'NAV MAster',
    imageElement: (
      <img
        width="100%"
        height="100%"
        sizes="100vw"
        decoding="async"
        src="/assets/placeholder.jpg"
        alt="Empty state"
      />
    )
  }
} as Meta

export const Team: StoryObj<ITeamsCard> = {
  render: args => (
    <div
      style={{
        display: 'grid',
        placeItems: 'start center',
        gridTemplateColumns: 'repeat(auto-fit, minmax(343px, 1fr))',
        gap: '16px'
      }}
    >
      <TeamsCard
        role={'Frontend Develloper'}
        name={'Marco Rodrigues'}
        imageElement={
          <img
            width="100%"
            height="100%"
            sizes="100vw"
            decoding="async"
            src="https://miew.pt/wp-content/uploads/2023/05/marco.jpg?x99013"
            alt="Empty state"
          />
        }
      />
      <TeamsCard
        role={args.role}
        name={args.name}
        imageElement={args.imageElement}
      />
    </div>
  )
}