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

const OrderCard = ({ data }) => {
  return (
    <Paper
      sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f2f2f2' }}
      elevation={3}
    >
      <Typography sx={{ fontWeight: 600 }}>
        Order placed on: {data.date}
      </Typography>
      <Divider />
      <Typography sx={{ mt: 1 }}>By: {data.name}</Typography>
      <Typography>Total: ${data.totalPrice}</Typography>
    </Paper>
  );
};

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

export default OrderCard;