coffee-ts/components/shipping-content/shipping-data/ShippingData.tsx

import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import { FC } from 'react';

interface Props {
  email: string;
  address: string;
  city: string;
  postcode: string;
  handleOpen: (x: string) => void;
}

const ShippingData: FC<Props> = ({
  email,
  address,
  city,
  postcode,
  handleOpen,
}) => {
  const { t } = useTranslation('shipping');

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          backgroundColor: '#f2f2f2',
          alignItems: 'center',
          mb: 2,
          borderRadius: 2,
          p: 1,
        }}
      >
        <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
          {t('shipping: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');
          }}
        >
          {t('shipping:changeBtn')}
        </Button>
      </Box>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          backgroundColor: '#f2f2f2',
          alignItems: 'center',
          mb: 2,
          borderRadius: 2,
          p: 1,
        }}
      >
        <Typography
          sx={{
            fontSize: { md: 18, xs: 16 },
            fontWeight: 600,
            mr: { xs: 1, sm: 0 },
          }}
        >
          {t('shipping:shipping')}
        </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');
          }}
        >
          {t('shipping:changeBtn')}
        </Button>
      </Box>
    </>
  );
};

export default ShippingData;