import { Box, Image, Progress, Text } from '@chakra-ui/react';
import React from 'react';
import { getFeatures } from '@brojs/cli';

const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл

export const PriceCar = ({ image, rating }) => {
  const BASE_WASH_PRICE: number = Number(
    getFeatures('dry-wash')['order-cost']?.value || 1000,
  );

  const calculateWashPrice = (rating: number) => {
    const priceIncrease =
      (BASE_WASH_PRICE * PRICE_INCREASE_PERCENT_PER_RATING * rating) / 100;
    return BASE_WASH_PRICE + priceIncrease;
  };

  const washPrice = calculateWashPrice(rating);
  const progressValue = (rating / 10) * 100;
  return (
    <Box
      alignItems='center'
      gap={5}
      width='100%'
      display='flex'
      flexDirection='column'
    >
      <Image
        maxWidth='600px'
        objectFit='contain'
        borderRadius='md'
        src={image}
        alt='Car Image'
      />
      {rating ? (
        <Box width='100%' maxW='600px'>
          <Text>Рейтинг загрязнения машины:</Text>
          <Progress value={progressValue} size='sm' colorScheme='red' mt={2} />
          <Text mt={2}>Стоимость мойки: {washPrice.toFixed(2)} руб.</Text>
        </Box>
      ) : (
        <Text>Не удалость определить уровень загрязнения машины</Text>
      )}
    </Box>
  );
};

export default PriceCar;
