"use client";

import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { MEAL_TYPES, type MealType } from "@/lib/constants/meal";

interface MealTypeSelectorProps {
  value: MealType | null;
  onChange: (type: MealType) => void;
  showSublabel?: boolean;
  variant?: "card" | "button";
  className?: string;
}

export function MealTypeSelector({
  value,
  onChange,
  showSublabel = false,
  variant = "card",
  className,
}: MealTypeSelectorProps) {
  if (variant === "button") {
    return (
      <div className={cn("grid grid-cols-3 gap-2", className)}>
        {MEAL_TYPES.map(({ value: type, label, icon: Icon, color }) => (
          <button
            key={type}
            type="button"
            className={cn(
              "flex flex-col items-center justify-center p-4 rounded-lg border-2 transition-colors",
              value === type
                ? "border-primary bg-primary/5"
                : "border-border hover:bg-muted",
            )}
            onClick={() => onChange(type)}
          >
            <Icon className={cn("h-6 w-6 mb-1", color)} />
            <span className="text-sm font-medium">{label}</span>
          </button>
        ))}
      </div>
    );
  }

  return (
    <div className={cn("grid gap-4 sm:grid-cols-3", className)}>
      {MEAL_TYPES.map(({ value: type, label, sublabel, icon: Icon, color }) => (
        <Card
          key={type}
          className={cn(
            "cursor-pointer transition-colors",
            value === type
              ? "border-primary bg-primary/5"
              : "hover:bg-muted/50",
          )}
          onClick={() => onChange(type)}
        >
          <CardContent className="flex flex-col items-center justify-center p-6">
            <Icon className={cn("h-10 w-10 mb-2", color)} />
            <span className="font-semibold">{label}</span>
            {showSublabel && sublabel && (
              <span className="text-sm text-muted-foreground">{sublabel}</span>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
