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

const ShippingData = ({ email, address, city, postcode, handleOpen }) => {
  return (
    <>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          backgroundColor: '#f2f2f2',
          alignItems: 'center',
          mt: 2,
          ml: 12,
          mb: 2,
          width: { lg: '90%', xs: '80%' },
          borderRadius: 2,
          p: 1,
        }}
      >
        <Typography sx={{ fontSize: 18, fontWeight: 600 }}>Contact</Typography>
        <Typography>{email}</Typography>
        <Button
          sx={{
            height: 35,
            minWidth: { md: 125, xs: 90 },
            fontSize: 15,
            textTransform: 'none',
            backgroundColor: '#CBA213',
            color: 'white',
          }}
          onClick={() => {
            handleOpen('Contact');
          }}
        >
          Change
        </Button>
      </Box>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          backgroundColor: '#f2f2f2',
          alignItems: 'center',
          ml: 12,
          mb: 2,
          width: { lg: '90%', xs: '80%' },
          borderRadius: 2,
          p: 1,
        }}
      >
        <Typography
          sx={{
            fontSize: { md: 18, xs: 16 },
            fontWeight: 600,
            mr: { xs: 1, sm: 0 },
          }}
        >
          Shipping to
        </Typography>
        <Typography>
          {address} | {city} | {postcode}
        </Typography>
        <Button
          sx={{
            height: 35,
            minWidth: { md: 125, xs: 90 },
            fontSize: 15,
            textTransform: 'none',
            backgroundColor: '#CBA213',
            color: 'white',
          }}
          onClick={() => {
            handleOpen('Shipping');
          }}
        >
          Change
        </Button>
      </Box>
    </>
  );
};

ShippingData.propTypes = {
  email: PropType.string,
  address: PropType.string,
  city: PropType.string,
  postcode: PropType.string,
  handleOpen: PropType.func,
};

export default ShippingData;