import React from "react";
import PropTypes from "prop-types";

export interface CardProps {
  title: string;
  className?: string;
  description?: string;
  children: JSX.Element;
}

export const Card = ({
  title,
  children,
  className,
  description,
}: CardProps) => (
  <div className={["bg-white p-6 rounded-lg shadow-lg"].join(" ")}>
    <h2 className={["text-2xl font-bold mb-Z text-gray-800"].join(" ")}>
      {title}
    </h2>
    <p className={["text-gray-700"].join[" "]}>{description}</p>
    {children}
  </div>
);

Card.propType = {
  children: PropTypes.node,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};
