import React, { useState } from "react";
import { Button, Box } from "@mui/material";
import CourseForm from "./CourseForm";
import { AddCircleOutlineOutlined } from "@mui/icons-material";

export default function CourseSection() {
  const [courses, setCourses] = useState([
    {
      id: Date.now(),
      title: "",
      institution: "",
      year: "",
      duration: "",
      description: "",
    },
  ]);

  const handleAdd = () => {
    setCourses([
      ...courses,
      {
        id: Date.now(),
        title: "",
        institution: "",
        year: "",
        duration: "",
        description: "",
      },
    ]);
  };

  const handleUpdate = (id: number | string, updatedData: any) => {
    setCourses(courses.map((c) => (c.id === id ? updatedData : c)));
  };

  const handleRemove = (id: number | string) => {
    setCourses(courses.filter((c) => c.id !== id));
  };

  return (
    <Box>
      {courses.map((course) => (
        <CourseForm
          key={course.id}
          data={course}
          onChange={(data) => handleUpdate(course.id, data)}
          onRemove={() => handleRemove(course.id)}
          isDeletable={courses.length > 1}
        />
      ))}

      <Button
        variant="contained"
        startIcon={<AddCircleOutlineOutlined />}
        onClick={handleAdd}
        sx={{
          backgroundColor: "#4caf50",
          "&:hover": { backgroundColor: "#388e3c" },
          borderRadius: "12px",
          mt: 1,
        }}
      >
        افزودن دوره آموزشی جدید
      </Button>
    </Box>
  );
}