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

/**
 * Skeleton de la page détail recette. Mime la structure de la vraie page :
 * hero image, titre, meta (temps/portions/difficulté), ingrédients, étapes.
 */
export function RecipeDetailLoader() {
  return (
    <motion.div
      className="max-w-4xl mx-auto px-4 pb-12"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      {/* Image hero */}
      <Shimmer className="aspect-[16/9] w-full rounded-2xl mb-6" />

      {/* Titre + description */}
      <div className="space-y-3 mb-8">
        <Shimmer className="h-8 w-3/4" />
        <Shimmer className="h-5 w-full max-w-lg" />
        <Shimmer className="h-5 w-1/2" />
      </div>

      {/* Meta (temps, portions, difficulté) */}
      <div className="flex flex-wrap gap-3 mb-8">
        {[1, 2, 3, 4].map((i) => (
          <Shimmer key={i} className="h-10 w-24 rounded-full" />
        ))}
      </div>

      {/* Ingrédients */}
      <div className="grid gap-6 md:grid-cols-[1fr_2fr]">
        <div className="space-y-3">
          <Shimmer className="h-6 w-32 mb-4" />
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} className="flex gap-3 items-center">
              <Shimmer className="h-4 w-4 rounded-full" />
              <Shimmer className="h-4 w-full" />
            </div>
          ))}
        </div>

        {/* Étapes */}
        <div className="space-y-3">
          <Shimmer className="h-6 w-32 mb-4" />
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="flex gap-3">
              <Shimmer className="h-8 w-8 rounded-full shrink-0" />
              <div className="flex-1 space-y-2">
                <Shimmer className="h-4 w-full" />
                <Shimmer className="h-4 w-5/6" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </motion.div>
  )
}
