import React from 'react'
import Heading from '@/components/atoms/Heading/Heading.component'
import { ITeamsCard } from './TeamsCard.interface'
import { StyledInfoBoxTeam, StyledTeamsCard } from './TeamsCard.theme'
import { StyledInfoBox } from '../ProjectCard/ProjectCard.theme'

/**
 *
 * @param name
 * @returns
 */

const TeamsCard = ({
  name,
  role,
  imageElement,
  className,
  style
}: ITeamsCard) => {
  const placholderElement = (
    <img
      width="100%"
      height="100%"
      sizes="100vw"
      decoding="async"
      src="/assets/placeholder.jpg"
      alt="Empty state"
    />
  )

  return (
    <StyledTeamsCard className={className} style={style}>
      {imageElement ?? placholderElement}
      <StyledInfoBoxTeam>
        <Heading
          size="h5"
          style={{ fontWeight: 'bold' }}
          className={'textEllipsis'}
        >
          {name}
        </Heading>
        <Heading size="texts" className={'textEllipsis'}>
          {role}
        </Heading>
      </StyledInfoBoxTeam>
    </StyledTeamsCard>
  )
}

export default TeamsCard