"use client";
import * as React from "react";
import { FolderKanban } from "lucide-react";
import { cn } from "@/lib/utils";

/** Curated project colours (hex) — the first entry is the iris accent. */
export const PROJECT_COLORS = ["#5457d6", "#0f9d7a", "#d97706", "#dc2626", "#db2777", "#7c3aed", "#0284c7", "#64748b"] as const;

/** Quick emoji choices for the create sheet (the input also accepts any emoji). */
export const PROJECT_EMOJIS = ["📁", "🚀", "🧪", "📊", "🧠", "✍️", "💼", "🎨", "🛠️", "📚", "🌍", "💡", "🔬", "📝", "🎯", "🧩", "🏗️", "🛒", "🎓", "❤️"];

export function projectTint(color?: string | null): React.CSSProperties | undefined {
  if (!color) return undefined;
  return { backgroundColor: `color-mix(in srgb, ${color} 16%, transparent)`, color };
}

export function ProjectIcon({ icon, color, size = "md", className }: { icon?: string | null; color?: string | null; size?: "sm" | "md" | "lg" | "xl"; className?: string }) {
  const dim = size === "sm" ? "size-6 text-[13px] rounded-md" : size === "lg" ? "size-11 text-[22px] rounded-xl" : size === "xl" ? "size-14 text-[28px] rounded-2xl" : "size-9 text-[18px] rounded-lg";
  return (
    <span className={cn("flex shrink-0 items-center justify-center leading-none", dim, !color && "bg-bg-muted text-fg-muted", className)} style={projectTint(color)} aria-hidden>
      {icon ? icon : <FolderKanban className={size === "sm" ? "size-3.5" : size === "xl" ? "size-6" : "size-4"} />}
    </span>
  );
}