import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { FC } from "react";
import Trash from "@icons/trash";

type AnswerItemProps = {
  fieldName: string;
  fieldValue: string;
  deleteHC: () => void;
};

export const AnswerItem: FC<AnswerItemProps> = ({ fieldName, fieldValue, deleteHC }) => {
  const theme = useTheme();
  return (
    <Box
      sx={{
        padding: "10px 20px",
        height: "140px",
        borderBottom: `1px solid ${theme.palette.background.default}`,
        display: "flex",
        alignItems: "center",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <Box
        sx={{
          overflow: "hidden",
          width: "100%",
        }}
      >
        <Typography
          sx={{
            fontSize: "14px",
            fontWeight: 500,
            color: theme.palette.grey3.main,
            textOverflow: "ellipsis",
            overflow: "hidden",
            width: "100%",
            whiteSpace: "nowrap",
          }}
        >
          {fieldName}
        </Typography>

        <Typography
          sx={{
            fontSize: "14px",
            fontWeight: 400,
            color: theme.palette.grey3.main,
            textOverflow: "ellipsis",
            overflow: "hidden",
            width: "100%",
            whiteSpace: "nowrap",
          }}
        >
          {fieldValue}
        </Typography>
      </Box>
      <IconButton
        sx={{
          m: "auto",
        }}
        onClick={deleteHC}
      >
        <Trash />
      </IconButton>
    </Box>
  );
};
