import type { LucideIcon } from "lucide-react";
import {
  BookPlus,
  CalendarDays,
  Coffee,
  Croissant,
  LayoutDashboard,
  Leaf,
  ListChecks,
  Moon,
  Salad,
  ShoppingCart,
  Soup,
} from "lucide-react";
import { NAV_ICON_EMOJI, type NavIconName } from "@/theme/appearance.config";
import { useAppearance } from "@/store/appearanceStore";

const ICON_MAP: Record<NavIconName, LucideIcon> = {
  dashboard: LayoutDashboard,
  coffee: Coffee,
  croissant: Croissant,
  soup: Soup,
  moon: Moon,
  list: ListChecks,
  book: BookPlus,
  leaf: Leaf,
  diet: Salad,
  calendar: CalendarDays,
  cart: ShoppingCart,
};

interface NavIconProps {
  name: NavIconName;
  className?: string;
}

export function NavIcon({ name, className = "h-5 w-5 shrink-0" }: NavIconProps) {
  const { useEmoji, strokeWidth } = useAppearance();

  if (useEmoji) {
    return (
      <span className="text-lg leading-none" aria-hidden="true">
        {NAV_ICON_EMOJI[name]}
      </span>
    );
  }

  const Icon = ICON_MAP[name];
  return <Icon className={className} strokeWidth={strokeWidth} aria-hidden="true" />;
}
