import React from 'react';
import {View} from 'react-native';
import {Image, Typography} from '@components';
import {Prize} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  prize: Prize;
}

export function PrizeCard({prize}: Props) {
  const {theme} = useTheme();

  const positionLabel = prize.positionCaption ?? prize.positionDisplay;

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      {!!prize.imageUrl && (
        <Image
          source={{uri: prize.imageUrl}}
          style={styles.image}
          contentFit="cover"
        />
      )}
      <View style={styles.textContainer}>
        <Typography variant="xxs" color={theme.text.neutral.lighter}>
          {positionLabel}
        </Typography>
        <Typography variant="xs" weight="semiBold">
          {prize.name}
        </Typography>
        {!!prize.description && (
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {prize.description}
          </Typography>
        )}
      </View>
    </View>
  );
}