import {
    Card,
    CardContent,
    CardHeader,
    Grid, IconButton, Tooltip,
    Typography,
} from "@mui/material";
import SellIcon from '@mui/icons-material/Sell';
import EditIcon from '@mui/icons-material/Edit';
import {useTranslations} from "next-intl";
import {NextLinkComposed} from "@/core/components/LinkRouting";


const RequestCard = ({item}) => {
    const t = useTranslations();
    return (
        <Grid item xs={12} md={6} lg={4}>
            <Card sx={{
                width: "100%",
                boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
            }}>
                <CardHeader
                    avatar={<SellIcon color="primary"/>}
                    title={`${t("LoanFollowUp.request_number")}: (${item.id})`}
                    subheader={item.latest_history_created_at}
                    action={
                        item.state_id === 7 ? ( // Use the ternary operator or if/else inside curly braces
                            <Tooltip title={t("LoanFollowUp.loan_request_correction")}>
                                <IconButton size="small"
                                            color="primary"
                                            variant="outlined"
                                            component={NextLinkComposed}
                                            to={{
                                                pathname: `edit-request-loan/${item.id}`,
                                            }} aria-label="fingerprint">
                                    <EditIcon/>
                                </IconButton>
                            </Tooltip>
                        ) : null
                    }
                />
                <CardContent sx={{pt: 0}}>
                    <Typography variant="button">
                        {item.loan_state}
                    </Typography>
                </CardContent>
            </Card>
        </Grid>
    );
};

export default RequestCard;