"use client";

import { cn } from "@/lib/utils";
import {
  getMealTypeConfig,
  getMealTypeLabel,
  type MealType,
} from "@/lib/constants/meal";

interface MealTypeIconProps {
  type: MealType;
  showLabel?: boolean;
  size?: "sm" | "md" | "lg";
  className?: string;
}

const sizeClasses = {
  sm: "h-4 w-4",
  md: "h-6 w-6",
  lg: "h-10 w-10",
};

export function MealTypeIcon({
  type,
  showLabel = false,
  size = "sm",
  className,
}: MealTypeIconProps) {
  const config = getMealTypeConfig(type);

  if (!config) {
    return showLabel ? <span>{type}</span> : null;
  }

  const Icon = config.icon;

  if (showLabel) {
    return (
      <div className={cn("flex items-center gap-2", className)}>
        <Icon className={cn(sizeClasses[size], config.color)} />
        <span className="font-medium">{getMealTypeLabel(type)}</span>
      </div>
    );
  }

  return <Icon className={cn(sizeClasses[size], config.color, className)} />;
}
