import React from 'react';
import { getImageSource } from '../../helpers/getImageSource';
import CardHeaderContent from './components/CardHeaderContent';
import { BOARD_THUMBNAIL_DEFAULT_URL } from './constants';
import { BoardCardProps } from './interfaces';
import { CardHeader, StyledCard, ThumbnailWrapper } from './styles';

const BoardCard = (props: BoardCardProps) => (
  <StyledCard {...props}>
    <CardHeader>
      <CardHeaderContent
        title={props.title}
        username={props.username}
        avatarUrl={props.avatarUrl}
        showAvatar={props.showAvatar}
        headerButtonExists={!!props.headerButton}
      />
      {props.headerButton}
    </CardHeader>

    <ThumbnailWrapper customImage={Boolean(props.thumbnailImage)}>
      {props.thumbnailImage || (
        <img
          id="thumbnail-image-fallback"
          data-testid="thumbnail-image"
          src={getImageSource(
            props.thumbnailUrl || BOARD_THUMBNAIL_DEFAULT_URL,
            640
          )}
        />
      )}
    </ThumbnailWrapper>
  </StyledCard>
);

export default BoardCard;