import React from "react";
import { Box, TextField, IconButton } from "@mui/material";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";

interface CourseAttributes {
  id: string | number;
  title: string;
  institution: string;
  year: number | string;
  duration: string;
  description?: string;
}

interface Props {
  data: CourseAttributes;
  onChange: (data: CourseAttributes) => void;
  onRemove: () => void;
  isDeletable: boolean;
}

export default function CourseForm({ data, onChange, onRemove, isDeletable }: Props) {
  const handleChange = (field: keyof CourseAttributes, value: any) => {
    onChange({ ...data, [field]: value });
  };

  return (
    <Box sx={{ mb: 2, position: "relative" }}>
      {isDeletable && (
        <IconButton
          onClick={onRemove}
          color="error"
          sx={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}
          aria-label="remove-course"
        >
          <DeleteOutlineOutlinedIcon />
        </IconButton>
      )}

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
          gap: 2,
        }}
      >
        <TextField
          fullWidth
          label="عنوان دوره"
          value={data.title}
          onChange={(e) => handleChange("title", e.target.value)}
        />

        <TextField
          fullWidth
          label="موسسه برگزار کننده"
          value={data.institution}
          onChange={(e) => handleChange("institution", e.target.value)}
        />

        <TextField
          fullWidth
          type="number"
          label="سال برگزاری"
          value={data.year}
          onChange={(e) => handleChange("year", e.target.value)}
        />

        <TextField
          fullWidth
          label="مدت دوره"
          value={data.duration}
          onChange={(e) => handleChange("duration", e.target.value)}
          placeholder="مثلاً 40 ساعت"
        />

        <TextField
          fullWidth
          multiline
          minRows={2}
          label="توضیحات"
          value={data.description || ""}
          onChange={(e) => handleChange("description", e.target.value)}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />
      </Box>
    </Box>
  );
}