import React from 'react'
import styles from '@/app/styles/components/Card.module.css'

type CardVariant = 'default' | 'highlight' | 'surface' | 'interactive' | 'error'
type CardSize = 'compact' | 'md'

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: CardVariant
  size?: CardSize
  isLoading?: boolean
  onClick?: () => void
  children: React.ReactNode
}

interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string
  subtitle?: string
  children?: React.ReactNode
}

interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  (
    {
      variant = 'default',
      size = 'md',
      isLoading = false,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const baseClass = styles.card
    const variantClass = styles[`card--${variant}`] || ''
    const sizeClass = size !== 'md' ? styles[`card--${size}`] : ''
    const loadingClass = isLoading ? styles['card--loading'] : ''

    return (
      <div
        ref={ref}
        className={`${baseClass} ${variantClass} ${sizeClass} ${loadingClass} ${className}`.trim()}
        {...props}
      >
        {children}
      </div>
    )
  }
)

Card.displayName = 'Card'

const CardHeader: React.FC<CardHeaderProps> = ({ title, subtitle, children, ...props }) => (
  <div className={styles.card__header} {...props}>
    {title && <h3 className={styles.card__title}>{title}</h3>}
    {subtitle && <p className={styles.card__subtitle}>{subtitle}</p>}
    {children}
  </div>
)

CardHeader.displayName = 'CardHeader'

const CardBody: React.FC<CardBodyProps> = ({ children, ...props }) => (
  <div className={styles.card__body} {...props}>
    {children}
  </div>
)

CardBody.displayName = 'CardBody'

const CardFooter: React.FC<CardFooterProps> = ({ children, ...props }) => (
  <div className={styles.card__footer} {...props}>
    {children}
  </div>
)

CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardBody, CardFooter }
export default Card