import React, { useEffect, useState } from "react";
import { Dropdown } from "primereact/dropdown";
import axios from "axios";

export default function DepartmentDropdown({
    field,
    placeholder = "Select Department",
    label = "Department",
    className = "w-full",
    showLabel = true,
}) {
    const [departments, setDepartments] = useState([]);

    useEffect(() => {
        axios
            .get(route("department.view"))
            .then((response) => {
                setDepartments(response.data.departments || []);
            })
            .catch(() => {
                setDepartments([]);
            });
    }, []);

    return (
        <span className="p-float-label">
            <Dropdown
                id={field.name}
                {...field}
                options={departments}
                optionLabel="name"
                optionValue="id"
                placeholder={placeholder}
                className={className}
                showClear
            />
            {showLabel && <label htmlFor={field.name}>{label}</label>}
        </span>
    );
}


