import React from "react";
import { Modal, Box } from "@mui/material";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";

const ReportModal = ({ open, onClose, onSubmit }) => {
  const [reason, setReason] = React.useState("");

  return (
    <Modal open={open} onClose={onClose}>
      <Box
        sx={{
          width: "90%",
          maxWidth: 400,
          bgcolor: "#fff",
          p: 3,
          borderRadius: 3,
          mx: "auto",
          mt: "20vh",
          boxShadow: 24,
          outline: "none",
        }}
      >
        {/* Back Arrow + Title */}
        <div className="flex items-center gap-2 mb-3">
          <ArrowBackIosNewIcon
            onClick={onClose}
            className="cursor-pointer"
            fontSize="small"
          />
          <h2 className="text-lg font-semibold text-gray-900">
            Profile Report Form
          </h2>
        </div>

        {/* Description */}
        <p className="text-sm text-gray-600 text-center leading-relaxed mb-4">
          If you find any incorrect information or suspicious activity, please
          report this profile so we can review it.
        </p>

        {/* Textarea */}
        <textarea
          value={reason}
          onChange={(e) => setReason(e.target.value)}
          className="w-full h-28 border border-gray-300 rounded-xl p-3 text-sm outline-none focus:border-black transition"
          placeholder="Enter your reason here"
        />

        {/* Submit Button */}
        <button
          onClick={() => onSubmit(reason)}
          className="w-full mt-4 bg-green-900 text-white py-2 rounded-xl text-sm font-medium hover:bg-green-800 transition"
        >
          Submit Report
        </button>
      </Box>
    </Modal>
  );
};

export default ReportModal;
