// src/components/ui/Card.tsx
// Input: padding, interactive, header, children
// Output: elevated container with optional hover effect
// Rationale: universal content container for all app screens

import { cn } from '@/lib/utils'

export interface CardProps {
  children: React.ReactNode
  className?: string
  padding?: 'sm' | 'md' | 'lg'
  interactive?: boolean
  header?: React.ReactNode
}

const paddingClasses = {
  sm: 'p-3',
  md: 'p-4',
  lg: 'p-6',
}

export function Card({ children, className, padding = 'md', interactive = false, header }: CardProps) {
  return (
    <div
      className={cn(
        'bg-bg-elevated border border-bg-border rounded-lg shadow-md',
        'transition-all duration-fast',
        interactive && 'cursor-pointer hover:border-accent-border hover:shadow-glow-accent',
        className
      )}
    >
      {header && (
        <div className="px-4 py-3 border-b border-bg-border">
          {header}
        </div>
      )}
      <div className={cn(paddingClasses[padding], header ? '' : '')}>
        {children}
      </div>
    </div>
  )
}