import { useBoardStore } from "@/stores/board-store";
import type { Priority } from "@/types/board";

const PRIORITIES: { value: Priority; label: string; color: string }[] = [
  { value: "none", label: "None", color: "oklch(50% 0 0 / 30%)" },
  { value: "low", label: "Low", color: "oklch(60% 0.15 240)" },
  { value: "medium", label: "Medium", color: "oklch(70% 0.15 85)" },
  { value: "high", label: "High", color: "oklch(60% 0.15 55)" },
  { value: "urgent", label: "Urgent", color: "oklch(55% 0.15 25)" },
];

interface PriorityPickerProps {
  cardId: string;
  priority: Priority;
}

export function PriorityPicker({ cardId, priority }: PriorityPickerProps) {
  const updateCard = useBoardStore((s) => s.updateCard);

  return (
    <div className="flex flex-col gap-2">
      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
        Priority
      </h4>
      <div className="flex flex-wrap gap-1.5">
        {PRIORITIES.map(({ value, label, color }) => (
          <button
            key={value}
            onClick={() => updateCard(cardId, { priority: value })}
            aria-pressed={priority === value}
            className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
              priority === value
                ? "text-white shadow-sm"
                : "text-pylon-text-secondary hover:text-pylon-text"
            }`}
            style={{
              backgroundColor: priority === value ? color : undefined,
              border: priority !== value ? `1px solid ${color}` : `1px solid transparent`,
            }}
          >
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}