'use client';

import { TaskPriority } from '@/lib/types';
import { getAllPriorities } from '@/lib/status-config';

interface PrioritySelectorProps {
  value: TaskPriority;
  onChange: (priority: TaskPriority) => void;
  disabled?: boolean;
  className?: string;
  title?: string;
}

export function PrioritySelector({
  value,
  onChange,
  disabled = false,
  className = '',
  title,
}: PrioritySelectorProps) {
  const priorities = getAllPriorities();
  const currentPriority = priorities.find((p) => p.key === value);

  return (
    <select
      value={value}
      onChange={(e) => {
        const selectedValue = e.target.value as TaskPriority;
        if (selectedValue) onChange(selectedValue);
      }}
      disabled={disabled}
      className={`bg-transparent border-none outline-none text-lg text-[var(--muted-foreground)] cursor-pointer text-center ${className}`}
      title={title || currentPriority?.label}
    >
      {priorities.map((priorityConfig) => (
        <option key={priorityConfig.key} value={priorityConfig.key}>
          {priorityConfig.icon}
        </option>
      ))}
    </select>
  );
}
