{{#IF_DESIGN_FRAMER_MOTION}}
'use client'

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

/**
 * Card — Styled container component
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 */

interface CardProps {
  children: React.ReactNode
  className?: string
  /** Add hover lift effect */
  hoverable?: boolean
  /** Add padding (default: true) */
  padded?: boolean
}

export function Card({ children, className = '', hoverable = false, padded = true }: CardProps) {
  const base = `bg-design-card border border-design-border {{DESIGN_RADIUS_CARD}} design-shadow-md design-transition`
  const padding = padded ? 'p-4 lg:p-6' : ''
  const hover = hoverable ? 'design-hover-lift cursor-pointer' : ''
  const classes = `${base} ${padding} ${hover} ${className}`.trim()

{{#IF_DESIGN_FRAMER_MOTION}}
  return (
    <motion.div
      className={classes}
      initial={{ opacity: 0, y: {{DESIGN_ENTRANCE_Y}} }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.2 }}
    >
      {children}
    </motion.div>
  )
{{/IF_DESIGN_FRAMER_MOTION}}

  return (
    <div className={classes}>
      {children}
    </div>
  )
}

/**
 * CardHeader — Title area within a Card
 */
export function CardHeader({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={`mb-4 ${className}`}>
      {children}
    </div>
  )
}

/**
 * CardTitle — Heading within CardHeader
 */
export function CardTitle({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <h3 className={`text-lg font-semibold text-design-fg ${className}`}>
      {children}
    </h3>
  )
}

/**
 * CardDescription — Subtitle within CardHeader
 */
export function CardDescription({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <p className={`mt-1 text-sm text-design-muted ${className}`}>
      {children}
    </p>
  )
}

/**
 * CardContent — Body area within a Card (when using CardHeader)
 */
export function CardContent({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={className}>
      {children}
    </div>
  )
}