import { type HTMLAttributes, forwardRef } from "react"

const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className = "", ...rest }, ref) => (
    <div
      ref={ref}
      className={`rounded-xl border border-gray-100 bg-white shadow-sm ${className}`}
      {...rest}
    />
  ),
)
Card.displayName = "Card"

function CardHeader({ className = "", children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={`flex items-start gap-3 px-6 pt-6 ${className}`} {...rest}>
      {children}
    </div>
  )
}

function CardContent({ className = "", children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={`px-6 pb-6 pt-4 ${className}`} {...rest}>
      {children}
    </div>
  )
}

export { Card, CardHeader, CardContent }
