"use client";

import { motion } from "framer-motion";

/** Shimmering placeholders. Sized to the real row so nothing jumps on load. */
export function Skeletons({ n = 6 }: { n?: number }) {
  return (
    <div className="flex flex-col gap-[7px]">
      {Array.from({ length: n }).map((_, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: i * 0.04 }}
          className="shimmer h-[68px] rounded-glass border border-edge"
        />
      ))}
    </div>
  );
}