import React from 'react'
import clsx from 'clsx'

/* ── Card Root ──────────────────────────────────────────────────────────────── */
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  hover?:   boolean
  padding?: 'none' | 'sm' | 'md' | 'lg'
  as?:      React.ElementType
}

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ hover = false, padding = 'none', as: Tag = 'div', className, children, ...props }, ref) => {
    const paddingClasses = {
      none: '',
      sm:   'p-4',
      md:   'p-5',
      lg:   'p-6',
    }

    return (
      <Tag
        ref={ref}
        className={clsx(
          'bg-white rounded-xl border border-surface-200 shadow-soft',
          hover && 'transition-all duration-200 cursor-pointer hover:shadow-soft-md hover:-translate-y-0.5',
          paddingClasses[padding],
          className,
        )}
        {...props}
      >
        {children}
      </Tag>
    )
  },
)
Card.displayName = 'Card'

/* ── Card Header ────────────────────────────────────────────────────────────── */
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  border?: boolean
}
export function CardHeader({ border = true, className, children, ...props }: CardHeaderProps) {
  return (
    <div
      className={clsx(
        'px-5 py-4',
        border && 'border-b border-surface-100',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

/* ── Card Body ──────────────────────────────────────────────────────────────── */
export function CardBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={clsx('px-5 py-4', className)} {...props}>
      {children}
    </div>
  )
}

/* ── Card Footer ────────────────────────────────────────────────────────────── */
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  border?: boolean
}
export function CardFooter({ border = true, className, children, ...props }: CardFooterProps) {
  return (
    <div
      className={clsx(
        'px-5 py-3',
        border && 'border-t border-surface-100',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

/* ── Card Title ─────────────────────────────────────────────────────────────── */
export function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h3 className={clsx('text-base font-semibold text-ink', className)} {...props}>
      {children}
    </h3>
  )
}

/* ── Card Description ───────────────────────────────────────────────────────── */
export function CardDescription({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={clsx('text-sm text-ink-muted mt-0.5', className)} {...props}>
      {children}
    </p>
  )
}

export default Card