"use client";
import { cn } from "../ui";

export const PROJECT_COLORS = ["#6d9cff", "#f0b35b", "#4fd1a5", "#ff6b6b", "#b48cff", "#ff9f5a", "#3cc7d6", "#e86fb3"];

export function ColorPicker({ value, onChange }: { value: string | null; onChange: (c: string) => void }) {
  return (
    <div className="flex flex-wrap gap-1.5" role="radiogroup" aria-label="Couleur du projet">
      {PROJECT_COLORS.map(c => (
        <button key={c} type="button" role="radio" aria-checked={value === c} onClick={() => onChange(c)} className={cn("h-6 w-6 rounded-full border-2 transition-transform hover:scale-110", value === c ? "border-fg" : "border-transparent")} style={{ background: c }} title={c} />
      ))}
    </div>
  );
}

export function fmtBytes(n?: number | null) { if (n == null) return "—"; if (n < 1024) return `${n} o`; if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} Ko`; return `${(n / 1024 / 1024).toFixed(1)} Mo`; }