'use client';

import React from 'react';

interface CardProps {
  title?: string;
  children: React.ReactNode;
  className?: string;
  gradient?: boolean;
}

export function Card({ title, children, className = '', gradient = false }: CardProps) {
  return (
    <div
      className={`
        rounded-xl shadow-lg overflow-hidden
        ${gradient ? 'bg-gradient-to-br from-white to-gray-50' : 'bg-white'}
        ${className}
      `}
    >
      {title && (
        <div className="px-6 py-4 border-b border-gray-100">
          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
        </div>
      )}
      <div className="p-6">{children}</div>
    </div>
  );
}