import { Box, Chip, Divider, TextField } from "@mui/material";
import { useEffect, useRef } from "react";
import { Controller } from "react-hook-form";

const CallActionDescription = ({ control }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, 100);

    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <Divider sx={{ margin: 2 }}>
        <Chip label={"توضیحات تماس (اختیاری)"} variant="outlined" />
      </Divider>
      <Box sx={{ m: 2 }}>
        <Controller
          control={control}
          render={({ field, fieldState: { error } }) => (
            <TextField
              {...field}
              inputRef={inputRef}
              variant="outlined"
              placeholder={"لطفا توضیحات خود را وارد نمایید"}
              type={"text"}
              fullWidth
              multiline
              rows={8}
            />
          )}
          name={"description"}
        />
      </Box>
    </>
  );
};
export default CallActionDescription;
