import React from 'react';
import { Box, Checkbox, Text } from '@nova-hf/ui';
import { Emoji } from 'assets/images/mobile-signup';
import { TextProps } from 'frisco/PredefinedProps';
import Image from 'next/image';
import { formatPrice } from 'utils/helpers';

type SelectCardProps = {
  onSelect: () => void;
  isSelected: boolean;
  price?: number;
  emoji?: Emoji;
} & TextProps;

const SelectCard = ({
  isSelected,
  onSelect,
  title,
  description,
  price,
  emoji,
}: SelectCardProps) => {
  return (
    <Box
      renderAs="button"
      borderStyle="solid"
      borderColor={isSelected ? 'pink' : 'transparent'}
      borderWidth={'2px'}
      backgroundColor={isSelected ? 'white' : 'grey100'}
      borderRadius="medium"
      onClick={onSelect}
      padding={1}
    >
      <Box display="flex" justifyContent="space-between" alignItems="center" width="100%">
        <Checkbox type="checked" isChecked={isSelected} onChange={onSelect} />
        <Box display="flex" flexDirection="row">
          <Text variant="pMediumBold">{formatPrice(price ?? 0)}</Text>
          <Text color="grey600" variant="pMediumRegular">
            /mán
          </Text>
        </Box>
      </Box>
      <Box
        display="flex"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
        paddingX={5}
        paddingY={{ sm: 0, md: 3 }}
      >
        <Box style={{ filter: isSelected ? 'none' : 'grayscale(1)' }}>
          <Image
            src={require(`/src/assets/images/mobile-signup/${emoji}.png`).default.src}
            alt="image"
            width={160}
            height={160}
          />
        </Box>
        <Box display="flex" flexDirection={{ sm: 'column' }} alignItems="center">
          <Text textAlign={{ sm: 'center' }} marginTop={3} variant="pLargeBold" color="black100">
            {title}
          </Text>
          <Text
            textAlign={{ sm: 'center' }}
            marginTop={1}
            marginBottom={{ sm: 1, md: 2 }}
            variant="pSmallRegular"
            color="grey500"
          >
            {description}
          </Text>
        </Box>
      </Box>
    </Box>
  );
};

export default SelectCard;