import * as React from 'react'
import { cn } from '../lib/cn'

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg'
  shadow?: 'none' | 'sm' | 'md'
  border?: boolean
}

const paddingMap: Record<NonNullable<CardProps['padding']>, string> = {
  none: 'p-0',
  sm: 'p-2',
  md: 'p-4',
  lg: 'p-6',
}

// Single shadow token system-wide; `sm`/`md` map onto the same `shadow` (no ladder).
const shadowMap: Record<NonNullable<CardProps['shadow']>, string> = {
  none: 'shadow-none',
  sm: 'shadow',
  md: 'shadow',
}

interface CardComposition {
  Header: React.FC<React.HTMLAttributes<HTMLDivElement>>
  Body: React.FC<React.HTMLAttributes<HTMLDivElement>>
  Footer: React.FC<React.HTMLAttributes<HTMLDivElement>>
}

const CardRoot = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, padding = 'md', shadow = 'none', border = true, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'rounded bg-surface text-ink',
        paddingMap[padding],
        shadowMap[shadow],
        border && 'border border-control-border',
        className,
      )}
      {...props}
    />
  ),
)
CardRoot.displayName = 'Card'

const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('flex flex-col gap-2 pb-4', className)} {...props} />
)
CardHeader.displayName = 'Card.Header'

const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('flex flex-col gap-2', className)} {...props} />
)
CardBody.displayName = 'Card.Body'

const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
  <div className={cn('flex items-center gap-2 pt-4', className)} {...props} />
)
CardFooter.displayName = 'Card.Footer'

export const Card = Object.assign(CardRoot, {
  Header: CardHeader,
  Body: CardBody,
  Footer: CardFooter,
}) as typeof CardRoot & CardComposition