import { Button, ButtonGroup, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import PropType from 'prop-types';
import { useState } from 'react';

const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
  const [quantity, setQuantity] = useState(1);

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: { xs: 'center' },
        width: { xs: '100%', md: '50%' },
        height: '100%',
      }}
    >
      <Typography
        variant="h3"
        sx={{ height: 60, mt: { xs: 5 }, color: 'white' }}
      >
        {data.name}
      </Typography>
      <Box
        sx={{
          width: 100,
          maxWidth: 100,
          height: 60,
        }}
      >
        <Image
          src="/images/Stars.svg"
          alt="reviews"
          width={100}
          height={50}
        ></Image>
      </Box>
      <Typography
        sx={{
          color: 'white',
        }}
      >
        {data.description}
      </Typography>
      <Box
        sx={{
          width: '100%',
          display: 'flex',
          mt: 4,
          flexDirection: { xs: 'column', md: 'row' },
          alignItems: { xs: 'center' },
          justifyContent: { md: 'center' },
        }}
      >
        <ButtonGroup
          size="small"
          aria-label="small outlined button group"
          sx={{
            height: 50,
            backgroundColor: bColor === 'light' ? '#664c47' : '#8f7772',
            color: 'white',
            border: 0,
          }}
        >
          <Button
            sx={{
              color: 'white',
              fontSize: 20,
              width: 50,
            }}
            onClick={() => {
              setQuantity((prevState) => prevState - 1);
            }}
          >
            -
          </Button>
          <Button
            sx={{
              color: 'white',
              fontSize: 17,
              width: 50,
            }}
          >
            {quantity}
          </Button>
          <Button
            sx={{
              color: 'white',
              fontSize: 20,
              width: 50,
            }}
            onClick={() => {
              setQuantity((prevState) => prevState + 1);
            }}
          >
            +
          </Button>
        </ButtonGroup>
        <Button
          sx={{
            mt: { xs: 2, md: 0 },
            ml: { md: 2 },
            backgroundColor: '#CBA213',
            height: 50,
            width: 150,
            color: 'white',
          }}
          disabled={inCart}
          onClick={() => addProductToCart(quantity)}
        >
          {inCart ? 'In Cart' : 'Add to cart'}
        </Button>
      </Box>
    </Box>
  );
};

ProductInfo.propTypes = {
  data: PropType.shape({
    name: PropType.string,
    description: PropType.string,
  }),
  bColor: PropType.string,
  side: PropType.string,
  addProductToCart: PropType.func,
  inCart: PropType.bool,
};
export default ProductInfo;