"use client";

import { useState } from "react";

export default function ProjectStatusDropdown({ project, onStatusChange }) {
	const [status, setStatus] = useState(project.project_status);
	const [loading, setLoading] = useState(false);

	const handleChange = async (e) => {
		const newStatus = e.target.value;
		setStatus(newStatus);
		setLoading(true);
		await fetch(`/api/projects/${project.project_id}`, {
			method: "PUT",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ ...project, project_status: newStatus }),
		});
		setLoading(false);
		if (onStatusChange) onStatusChange(newStatus);
	};

	return (
		<select
			name="project_status"
			value={status}
			onChange={handleChange}
			className="ml-2 border p-1 rounded"
			disabled={loading}
		>
			<option value="registered">Zarejestrowany</option>
			<option value="in_progress_design">W realizacji (projektowanie)</option>
			<option value="in_progress_construction">
				W realizacji (realizacja)
			</option>
			<option value="fulfilled">Zakończony</option>
		</select>
	);
}