import type { HTMLAttributes } from 'react'
import { cn } from '../../lib/utils'

type Props = HTMLAttributes<HTMLDivElement> & {
  padding?: boolean
}

export function Card({ className, padding = true, children, ...props }: Props) {
  return (
    <div className={cn('panel', padding && 'p-3', className)} {...props}>
      {children}
    </div>
  )
}

export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('mb-2 flex items-center justify-between gap-2', className)} {...props} />
}

export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return <h3 className={cn('text-xs font-semibold tracking-tight text-foreground', className)} {...props} />
}

export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn('text-[10px] text-foreground-muted', className)} {...props} />
}