import { Box, Paper, Typography } from '@mui/material';
import Image from 'next/image';
import PropType from 'prop-types';

const DataCard = ({ data, quantity }) => {
  return (
    <Paper
      sx={{
        p: 3,
        width: { lg: '100%', xs: '35%' },
        mb: 2,
        ml: { lg: 0, xs: 6 },
        backgroundColor: '#f2f2f2',
        display: 'flex',
        flex: { xs: [0, 0, '32%'], lg: 'none' },
      }}
      elevation={3}
    >
      <Box
        sx={{
          width: '30%',
          display: { xs: 'none', lg: 'flex' },
        }}
      >
        <Image
          src="/images/coffee-mug.svg"
          alt="profile"
          width={200}
          height={250}
        />
      </Box>
      <Box
        sx={{
          ml: { xs: 0, md: 3 },
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            fontWeight: 600,
            fontSize: { md: 20, xs: 16 },
          }}
        >
          {data.name}
        </Typography>
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            fontWeight: 600,
            fontSize: { md: 20, xs: 16 },
          }}
        >
          x{quantity}
        </Typography>

        <Typography
          sx={{
            mt: { lg: 3, xs: 1 },
            textAlign: 'center',
            fontSize: 14,
          }}
        >
          ${data.price} (per unit)
        </Typography>
      </Box>
    </Paper>
  );
};

DataCard.propTypes = {
  product: PropType.shape({
    category: PropType.string,
    name: PropType.string,
    image: PropType.string,
    description: PropType.string,
    place: PropType.string,
    people: PropType.string,
    process: PropType.string,
    pairing: PropType.string,
    available: PropType.Boolean,
    isFeatured: PropType.Boolean,
    price: PropType.number,
    customID: PropType.string,
  }),
  quantity: PropType.number,
};

export default DataCard;