import { CenterLayout, FullPageLayout, NextLinkComposed, useUser } from "@witel/webapp-builder";
import { Button, Card, CardActions, CardContent, Stack, Typography } from "@mui/material";
import { useTranslations } from "next-intl";
import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";

const FirstComponent = () => {
    const { user } = useUser();
    const t = useTranslations();
    return (
        <FullPageLayout>
            <CenterLayout spacing={2}>
                {user.permissions.includes("can_request_navgan_loan") ? (
                    <Stack direction={"row"} spacing={2}>
                        <Card
                            sx={{
                                minWidth: 345,
                                boxShadow: 3,
                                transition: "transform 0.3s ease-in-out",
                                "&:hover": { transform: "scale(1.05)" },
                            }}
                        >
                            <CardContent
                                sx={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                <DirectionsCarIcon sx={{ fontSize: 50, color: "primary.main" }} />
                                <Typography variant="h6" gutterBottom>
                                    {t("Dashboard.request_navgan_loan")}
                                </Typography>
                                <Typography variant="body2" color="text.secondary">
                                    {t("Dashboard.navgan_loan_description")}
                                </Typography>
                            </CardContent>
                            <CardActions>
                                <Button
                                    component={NextLinkComposed}
                                    to={{ pathname: "/dashboard/navgan/add-request-loan" }}
                                    variant="contained"
                                    size="large"
                                    fullWidth
                                >
                                    {t("Dashboard.navgan_loan_request_page")}
                                </Button>
                            </CardActions>
                        </Card>
                        <Card
                            sx={{
                                minWidth: 345,
                                boxShadow: 3,
                                transition: "transform 0.3s ease-in-out",
                                "&:hover": { transform: "scale(1.05)" },
                            }}
                        >
                            <CardContent
                                sx={{
                                    display: "flex",
                                    flexDirection: "column",
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                <VolunteerActivismIcon sx={{ fontSize: 50, color: "secondary.main" }} />
                                <Typography variant="h6" gutterBottom>
                                    {t("Dashboard.request_refahi_loan")}
                                </Typography>
                                <Typography variant="body2" color="text.secondary">
                                    {t("Dashboard.refahi_loan_description")}
                                </Typography>
                            </CardContent>
                            <CardActions>
                                <Button
                                    component={NextLinkComposed}
                                    to={{ pathname: "/dashboard/refahi/add-request-loan" }}
                                    variant="contained"
                                    size="large"
                                    fullWidth
                                >
                                    {t("Dashboard.refahi_loan_request_page")}
                                </Button>
                            </CardActions>
                        </Card>
                    </Stack>
                ) : (
                    <>
                        <Typography>{t("Dashboard.go_to_followUp-loan")}</Typography>
                        <Button
                            component={NextLinkComposed}
                            to={{ pathname: "/dashboard/followUp-loan" }}
                            variant={"contained"}
                            size={"large"}
                        >
                            {t("LoanFollowUp.loan_follow_up_page")}
                        </Button>
                    </>
                )}
            </CenterLayout>
        </FullPageLayout>
    );
};

export default FirstComponent;