"use client";

import { Box, Card, CardContent, Grid, TextField, Stack } from "@mui/material";
import { useTranslation } from "react-i18next";
import { FGPickOrderResponse } from "@/app/api/pickOrder/actions";

interface Props {
  fgOrder: FGPickOrderResponse;
}

const FGPickOrderInfoCard: React.FC<Props> = ({ fgOrder }) => {
  const { t } = useTranslation("pickOrder");

  return (
    <Card sx={{ display: "block", mb: 2 }}>
      <CardContent component={Stack} spacing={2}>
        <Box>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.pickOrderCode || ""}
                label={t("Pick Order Code")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.deliveryNo || ""}
                label={t("Delivery No")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.shopName || ""}
                label={t("Shop Name")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.ticketNo || ""}
                label={t("Ticket No")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.storeId || ""}
                label={t("Store")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.truckLanceCode || ""}
                label={t("Truck Lane Code")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.DepartureTime || ""}
                label={t("Departure Time")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.shopAddress || ""}
                label={t("Shop Address")}
                fullWidth
                disabled={true}
                multiline
                rows={2}
              />
            </Grid>
            
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default FGPickOrderInfoCard;