import {
    Box,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    CircularProgress,
    Typography,
} from "@mui/material";
import "moment/locale/fa";
import { useHistory } from "@/lib/hooks/useHistory";

const TableContent = ({ rowId }) => {
    const { historyData, loading, error } = useHistory(rowId);

    if (loading) {
        return (
            <Box display="flex" justifyContent="center" alignItems="center" height={200}>
                <CircularProgress />
            </Box>
        );
    }

    if (error) {
        return (
            <Box display="flex" justifyContent="center" alignItems="center" height={200}>
                <Typography color="error">{error}</Typography>
            </Box>
        );
    }

    if (!historyData.length) {
        return (
            <Box display="flex" justifyContent="center" alignItems="center" height={200}>
                <Typography>اطلاعاتی وجود ندارد</Typography>
            </Box>
        );
    }

    return (
        <Box>
            <TableContainer sx={{ maxHeight: 600 }}>
                <Table stickyHeader sx={{ minWidth: 800 }}>
                    <TableHead>
                        <TableRow>
                            <TableCell>وضعیت</TableCell>
                            <TableCell>توضیحات کارشناس</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {historyData.map((row) => (
                            <TableRow key={row.id} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
                                <TableCell>{row.previous_state_name}</TableCell>
                                <TableCell>{row.expert_description}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default TableContent;