"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ChefHat, Plus } from "lucide-react"

interface EmptyRecipesProps {
  onCreateRecipe: () => void
}

export function EmptyRecipes({ onCreateRecipe }: EmptyRecipesProps) {
  return (
    <motion.div
      className="flex flex-col items-center justify-center py-12 text-center px-4"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div className="mb-6 relative">
        <ChefHat className="h-20 w-20 text-muted-foreground opacity-20" />
        <motion.div
          className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-orange-100 dark:bg-orange-900"
          animate={{
            scale: [1, 1.2, 1],
            opacity: [0.7, 1, 0.7],
          }}
          transition={{
            duration: 2,
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
          }}
        />
      </div>

      <h3 className="text-xl font-semibold mb-2">Aucune recette trouvée</h3>
      <p className="text-muted-foreground max-w-md mb-6">
        Votre collection de recettes est vide. Créez votre première recette en enregistrant les ingrédients que vous
        avez dans votre frigo.
      </p>

      <Button
        onClick={onCreateRecipe}
        className="bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white"
      >
        <Plus className="mr-2 h-4 w-4" />
        Créer ma première recette
      </Button>
    </motion.div>
  )
}

