/**
 * Card 组件
 * 
 * 统一的卡片容器组件，遵循三层架构设计
 * 提供多种变体样式（base、hover、large、flat、rainbow、glass、neon）
 * 支持自定义内边距和样式类名
 * 
 * @created 2025-11-22
 * @component
 */

'use client'

import { ReactNode, HTMLAttributes } from 'react'
import { useThemeStyles, cn } from '@/lib/ui-styles'

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
  variant?: 'base' | 'hover' | 'large' | 'flat' | 'rainbow' | 'glass' | 'neon'
  padding?: 'none' | 'sm' | 'md' | 'lg'
  className?: string
}

export default function Card({
  children,
  variant = 'base',
  padding = 'md',
  className = '',
  ...props
}: CardProps) {
  const styles = useThemeStyles()

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

  const variantClass = styles.cardStyles[variant]

  return (
    <div
      className={cn(
        variantClass,
        paddingClasses[padding],
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}