import React from 'react';
import { ICardClickable } from './CardTypes';
import { 
  CardClickable,
  CardClickableInfo,
  CardClickableCategory,
  CardClickableImage,
  CardClickableDescription,
  CardClickableTitle,
  CardClickablePoints,
} from './styles';
import { AtomBody } from 'react/atoms/Typography/Body';
import { AtomImage } from 'react/atoms/Image';

export const OrganismCardClickable = ({
  type,
  description,
  image,
  title,
  points,
  handleClick,
  category,
  heightCard,
  widthCard
}: ICardClickable) => {
  return (
    <CardClickable onClick={handleClick} type={type} heightCard={heightCard} widthCard={widthCard}>
      {
        category && type === 'vertical' && (
          <CardClickableCategory>
            <AtomBody text={category} size='small' color={'neutral500'} weight='regular' />
          </CardClickableCategory>
        )
      }
      <CardClickableImage type={type}>
        <AtomImage
          src={image}
          alt='card clickable image'
          imgWidth='100%'
          imgHeight='160px'
        />
      </CardClickableImage>
      <CardClickableInfo>
        <CardClickableDescription>
          <AtomBody
            text={description}
            size='small'
            color={'neutral500'}
            weight='regular'
            align={type === 'horizontal' ? 'left' : 'center'}
          />
        </CardClickableDescription>
        <CardClickableTitle>
          <AtomBody
            text={title}
            size='medium'
            weight='bold'
            align={type === 'horizontal' ? 'left' : 'center'}
          />
        </CardClickableTitle>
        <CardClickablePoints>
          <AtomBody
            text={points}
            size='medium'
            weight='bold'
            color={'primary'}
            align={type === 'horizontal' ? 'left' : 'center'}
          />
        </CardClickablePoints>
      </CardClickableInfo>
    </CardClickable>
  )
}
