import {
  Button,
  Stack,
  SxProps,
  Table,
  TableBody,
  TableCell,
  TableRow,
  Typography,
  useTheme,
} from "@mui/material";
import TextFieldEx from "components/form/TextFieldEx";
import { ReactNode, useEffect, useMemo } from "react";

export { default as TableHeadCustom } from "./TableHeadCustom";

export type SimpleData = {
  title: string;
  value?: string;
  end?: ReactNode;
};

export type SimpleDataListProps = {
  data: SimpleData[];
  tableSx?: SxProps;
};
export const SimpleDataList = ({ data, tableSx }: SimpleDataListProps) => {
  const { typography } = useTheme();

  const fontSize = useMemo(() => {
    return typography.body2.fontSize;
  }, [typography]);

  return (
    <Table sx={tableSx}>
      <TableBody>
        {data.map(({ title, value, end }, index) => {
          return (
            <TableRow key={index}>
              <TableCell
                sx={{ borderRight: "1px solid rgba(224, 224, 224, 1)" }}
              >
                <Typography variant="body2">{title}</Typography>
              </TableCell>
              <TableCell>
                <Stack direction="row" spacing={1}>
                  <TextFieldEx
                    value={value ?? ""}
                    readOnly
                    multiline
                    fullWidth
                    inputProps={{ style: { fontSize } }}
                  />
                  {end}
                </Stack>
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};