import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Utensils, Salad, Cake, CookingPot, Icon, Carrot } from "lucide-react";
import { cheese } from "@lucide/lab";

interface Course {
  name: string;
  description: string;
}

interface Meal {
  name: string;
  courses: Course[];
}

const getCourseIcon = (courseName: string) => {
  const name = courseName.toLowerCase();
  if (name.includes("hors")) return <Salad className="h-6 w-6" />;
  if (name.includes("plat")) return <CookingPot className="h-6 w-6" />;
  if (name.includes("garniture")) return <Carrot className="h-6 w-6" />;
  if (name.includes("fromage"))
    return <Icon iconNode={cheese} className="h-6 w-6" />;
  if (name.includes("dessert")) return <Cake className="h-6 w-6" />;
  return <Utensils className="h-6 w-6" />;
};

export function DailyMenu({ meals }: { meals: Meal[] }) {
  if (meals.length === 0) {
    return (
      <div className="flex items-center justify-center p-4">
        <p className="text-muted-foreground">
          Aucun menu disponible pour ce jour.
        </p>
      </div>
    );
  }

  return (
    <div className="px-4 py-2">
      <h2 className="text-2xl font-bold mb-4">
        {meals.length > 1 ? "Menus" : "Menu"} du jour
      </h2>

      {meals.map((meal, mealIndex) => (
        <Card key={mealIndex} className="w-full mb-6">
          <CardHeader className="pb-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div>
                  <CardTitle className="text-xl2 font-bold text-foreground capitalize">
                    <Utensils className="inline h-5 w-5 mr-4 text-primary" />
                    {meal.name}
                  </CardTitle>
                </div>
              </div>
            </div>
          </CardHeader>

          <CardContent className="pt-0 pb-4">
            <div className="space-y-4">
              {meal.courses.map((course, courseIndex) => (
                <div key={courseIndex} className="flex items-start gap-3">
                  <div className="p-2 rounded-full bg-primary/10">
                    {getCourseIcon(course.name)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4 className="text-sm font-semibold text-primary mb-1">
                      {course.name}
                    </h4>
                    <p className="text-sm text-muted-foreground leading-relaxed">
                      {course.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}