import { ReactNode } from 'react'
import clsx from 'clsx'

interface CardProps {
  children: ReactNode
  className?: string
  title?: string
}

export function Card({ children, className, title }: CardProps) {
  return (
    <div
      className={clsx(
        'rounded-xl bg-white p-4 shadow-md dark:bg-gray-800 sm:p-6',
        className
      )}
    >
      {title && (
        <h3 className="mb-3 text-lg font-semibold text-gray-900 dark:text-white sm:mb-4 sm:text-xl">
          {title}
        </h3>
      )}
      {children}
    </div>
  )
}
