import { Card } from "@/components/ui/card"
import { Shimmer } from "@/components/ui/shimmer"
import { motion } from "framer-motion"

interface RecipeCardSkeletonProps {
  index?: number
}

/**
 * Skeleton qui mime la structure d'une RecipeCard, avec un shimmer
 * animé. Utilisé pendant le chargement initial de la liste des recettes.
 */
export function RecipeCardSkeleton({ index = 0 }: RecipeCardSkeletonProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.06, duration: 0.4 }}
    >
      <Card className="overflow-hidden h-full border-none shadow-md">
        {/* Image placeholder */}
        <Shimmer className="aspect-video w-full rounded-none" />

        {/* Contenu */}
        <div className="p-4 space-y-3">
          <div className="flex gap-2">
            <Shimmer className="h-5 w-16 rounded-full" />
            <Shimmer className="h-5 w-20 rounded-full" />
          </div>
          <Shimmer className="h-4 w-3/4" />
          <Shimmer className="h-3 w-1/2" />
          <div className="flex items-center justify-between pt-2">
            <Shimmer className="h-8 w-28 rounded-full" />
            <div className="flex gap-2">
              <Shimmer className="h-8 w-8 rounded-full" />
              <Shimmer className="h-8 w-8 rounded-full" />
            </div>
          </div>
        </div>
      </Card>
    </motion.div>
  )
}

/**
 * Grille de skeletons pour remplir l'écran pendant le chargement.
 */
export function RecipeListSkeleton({ count = 6 }: { count?: number }) {
  return (
    <div className="grid gap-6 my-6 mx-4 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: count }).map((_, i) => (
        <RecipeCardSkeleton key={i} index={i} />
      ))}
    </div>
  )
}
