{{#IF_DESIGN_FRAMER_MOTION}}
'use client'

import { motion } from 'framer-motion'
{{/IF_DESIGN_FRAMER_MOTION}}

/**
 * ChunkedGrid — Grid layout with staggered animation
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 *
 * Renders items in a responsive CSS grid with staggered entrance.
 * Great for dashboards, card grids, and collection displays.
 *
 * Usage:
 *   <ChunkedGrid columns={3}>
 *     {items.map(item => <Card key={item.id}>{item.name}</Card>)}
 *   </ChunkedGrid>
 */

interface ChunkedGridProps {
  children: React.ReactNode
  /** Number of columns at lg breakpoint (default: 3) */
  columns?: 1 | 2 | 3 | 4
  /** Gap between items (default: 'md') */
  gap?: 'sm' | 'md' | 'lg'
  className?: string
}

const columnClasses: Record<number, string> = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 sm:grid-cols-2',
  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
}

const gapClasses: Record<string, string> = {
  sm: 'gap-2',
  md: 'gap-4',
  lg: 'gap-6',
}

export function ChunkedGrid({ children, columns = 3, gap = 'md', className = '' }: ChunkedGridProps) {
  const gridCols = columnClasses[columns] ?? columnClasses[3]
  const gridGap = gapClasses[gap] ?? gapClasses.md

{{#IF_DESIGN_FRAMER_MOTION}}
  return (
    <motion.div
      className={`grid ${gridCols} ${gridGap} ${className}`}
      initial="hidden"
      animate="visible"
      variants={{
        hidden: {},
        visible: { transition: { staggerChildren: 0.05 } },
      }}
    >
      {children}
    </motion.div>
  )
{{/IF_DESIGN_FRAMER_MOTION}}

  return (
    <div className={`grid ${gridCols} ${gridGap} ${className}`}>
      {children}
    </div>
  )
}

/**
 * ChunkedGridItem — Wrapper for grid items with entrance animation
 */
export function ChunkedGridItem({ children, className = '' }: { children: React.ReactNode; className?: string }) {
{{#IF_DESIGN_FRAMER_MOTION}}
  return (
    <motion.div
      className={className}
      variants={{
        hidden: { opacity: 0, y: {{DESIGN_ENTRANCE_Y}} },
        visible: { opacity: 1, y: 0 },
      }}
      transition={{ duration: 0.2 }}
    >
      {children}
    </motion.div>
  )
{{/IF_DESIGN_FRAMER_MOTION}}

  return (
    <div className={`design-animate-in ${className}`}>
      {children}
    </div>
  )
}