import BaseModal from '@/components/ui-kit/BaseModal';
import { Customer } from '@/data/customers/customer.model';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Grid, Typography } from '@mui/material';
import React from 'react';

type Props = {
    onClose: () => void;
    data: Customer;
};

const ClientModal = ({ onClose, data }: Props) => {
    const t = useMyTranslation();

    return (
        <BaseModal maxWidth='600px' onClose={onClose} open>
            <Typography variant='h5' mb={3}>
                {t('client')}
            </Typography>
            <Grid container spacing={2}>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('id')}
                    </Typography>
                    <Typography>{data.id}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('fullName')}
                    </Typography>
                    <Typography>{data.fullName}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('phone')}
                    </Typography>
                    <Typography>{data.phone}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('address')}
                    </Typography>
                    <Typography>{data.address}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('pinfl')}
                    </Typography>
                    <Typography>{data.pinfl}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('passportSeries')}
                    </Typography>
                    <Typography>{data.passportSeries}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('avia_cargo_id')}
                    </Typography>
                    <Typography>{data.aviaCargoId}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('auto_cargo_id')}
                    </Typography>
                    <Typography>{data.autoCargoId}</Typography>
                </Grid>
                <Grid item xs={6}>
                    <Typography fontWeight={700} mb={1}>
                        {t('date_of_birth')}
                    </Typography>
                    <Typography>{data.dateOfBirth}</Typography>
                </Grid>
            </Grid>
        </BaseModal>
    );
};

export default ClientModal;
