import type { HTMLAttributes, ReactNode } from 'react'

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

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * `flat` sits on the page with a border only; `raised` adds restrained
   * shadow. There is no third, heavier level -- depth beyond this reads as
   * decoration rather than hierarchy.
   */
  elevation?: 'flat' | 'raised'
  /** Adds hover feedback. Only for cards that are themselves clickable. */
  interactive?: boolean
}

export function Card({
  elevation = 'flat',
  interactive = false,
  className,
  children,
  ...props
}: CardProps) {
  return (
    <div
      className={cn(
        // In light mode this is white on white; the border does the separating.
        'rounded-xl border border-border-subtle bg-surface',
        elevation === 'raised' && 'shadow-sm',
        interactive &&
          'transition-[border-color,box-shadow] duration-150 hover:border-border-strong hover:shadow-md',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

export function CardHeader({
  title,
  description,
  action,
  className,
}: {
  title: ReactNode
  description?: ReactNode
  action?: ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        'flex items-start justify-between gap-4 border-b border-border-subtle px-5 py-4',
        className,
      )}
    >
      <div className="min-w-0">
        <h2 className="text-base font-semibold text-text-primary">{title}</h2>
        {description !== undefined && (
          <p className="mt-1 text-sm text-text-secondary">{description}</p>
        )}
      </div>
      {action !== undefined && <div className="shrink-0">{action}</div>}
    </div>
  )
}

export function CardBody({
  className,
  children,
}: {
  className?: string
  children: ReactNode
}) {
  return <div className={cn('px-5 py-5', className)}>{children}</div>
}

export function CardFooter({
  className,
  children,
}: {
  className?: string
  children: ReactNode
}) {
  return (
    <div
      className={cn(
        'flex items-center justify-end gap-3 border-t border-border-subtle bg-surface-sunken px-5 py-4',
        className,
      )}
    >
      {children}
    </div>
  )
}
