import React from "react";

export default function Card({ title, children, onClose }) {
  return (
    <div className="relative bg-white rounded-xl shadow-lg p-6 w-[400px] h-[300px]">
      <button
        onClick={onClose}
        className="absolute top-2 right-2 text-gray-500 hover:text-black text-xl font-bold leading-none"
        aria-label="Close"
      >
        ×
      </button>
      {title && <h2 className="text-xl font-semibold mb-4">{title}</h2>}
      <div className="overflow-auto h-[calc(100%-3.5rem)]">{children}</div>
    </div>
  );
}