import { HTMLAttributes, ReactNode } from 'react';

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  title?: string;
  children: ReactNode;
}

export function Card({ title, children, className = '', ...props }: CardProps) {
  return (
    <div
      className={`bg-surface rounded-xl shadow-sm border border-border p-6 ${className}`}
      {...props}
    >
      {title && <h2 className="text-xl font-semibold text-text mb-4">{title}</h2>}
      {children}
    </div>
  );
}