import { Card, Divider, Typography } from '@mui/material';
import { Box } from '@mui/system';
import PropType from 'prop-types';

const OrderCard = ({ data }) => {
  return (
    <Card
      sx={{
        width: '100%',
        backgroundColor: '#f2f2f2',
        p: 2,
        mb: 2,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: { xs: 'center', md: 'flex-start' },
        }}
      >
        <Typography sx={{ fontWeight: 600 }}>
          Order placed on: {data.date}
        </Typography>
        <Divider />
        <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
        <Typography>Total: ${data.totalPrice.toFixed(2)}</Typography>
      </Box>
    </Card>
  );
};

OrderCard.propTypes = {
  data: PropType.shape({
    date: PropType.string,
    name: PropType.string,
    totalPrice: PropType.number,
  }),
};

export default OrderCard;