interface StatusPickerProps {
  selectedStatus: "todo" | "in_progress" | "done";
  setSelectedStatus: (status: "todo" | "in_progress" | "done") => void;
}

export const StatusPicker = ({ selectedStatus, setSelectedStatus }: StatusPickerProps) => {
  return (
    <div>
      <label className="block text-base font-semibold text-gray-700 dark:text-gray-300 mb-2">
        Statut
      </label>
      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
            selectedStatus === "todo"
              ? "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 ring-2 ring-gray-300 dark:ring-gray-600"
              : "bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
          }`}
          onClick={() => setSelectedStatus("todo")}
        >
          À faire
        </button>
        <button
          type="button"
          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
            selectedStatus === "in_progress"
              ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 ring-2 ring-blue-300 dark:ring-blue-600"
              : "bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
          }`}
          onClick={() => setSelectedStatus("in_progress")}
        >
          En cours
        </button>
        <button
          type="button"
          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
            selectedStatus === "done"
              ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 ring-2 ring-green-300 dark:ring-green-600"
              : "bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
          }`}
          onClick={() => setSelectedStatus("done")}
        >
          Terminé
        </button>
      </div>
    </div>
  );
};
