// material-ui
import {
    Grid,
    Typography, FormLabel,
} from '@mui/material';

import MainCard from "../../../components/MainCard";
import * as React from "react";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const GazetteDetailCard = ({ data }) => {

    const [appData, setAppData] = React.useState({});

    React.useEffect(() => {
        if (Object.keys(data).length > 0) {
            setAppData(data);
        }
    }, [data]);

    return (

        <MainCard elevation={0}
            border={false}
            content={false}
        >
            <Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                Gazette Details
            </Typography>
            <form>
                <Grid container direction="column">
                    <Grid item xs={12} md={12}>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Issue Number:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Typography variant="h5">
                                            {appData.issueNum}
                                        </Typography>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Gazette Code:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Typography variant="h5">
                                            {appData.groupNo}
                                        </Typography>

                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid container direction="row" justifyContent="space-between"
                            alignItems="center">
                            <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Issue Date:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Typography variant="h5">
                                            {appData.gazetteIssueDate}
                                        </Typography>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="h5">Group Title:</Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} md={9} lg={9}>
                                        <Typography variant="h5">
                                            {appData.groupTitle}
                                        </Typography>

                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </form>
        </MainCard>
    );
};

export default GazetteDetailCard;
