"use client";

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Button from "@mui/material/Button";
import ClaimInputGrid from "./ClaimInputGrid";

const ClaimDetails: React.FC = () => {
  const { t } = useTranslation();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Box>
          {/* <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Related Project")}
          </Typography> */}
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Related Project")}</InputLabel>
                <Select label={t("Project Category")}>
                  <MenuItem value={"M1001"}>{t("M1001")}</MenuItem>
                  <MenuItem value={"M1301"}>{t("M1301")}</MenuItem>
                  <MenuItem value={"M1354"}>{t("M1354")}</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Expense Type")}</InputLabel>
                <Select label={t("Team Lead")}>
                  <MenuItem value={"Petty Cash"}>{"Petty Cash"}</MenuItem>
                  <MenuItem value={"Expense"}>{"Expense"}</MenuItem>
                </Select>
              </FormControl>
            </Grid>
          </Grid>
        </Box>

        <Card>
          <ClaimInputGrid />
        </Card>

        {/* <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions> */}
      </CardContent>
    </Card>
  );
};

export default ClaimDetails;
