import type { ReactNode } from "react";

export default function Card({
  title,
  description,
  children,
  className,
}: {
  title?: string;
  description?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <section className={["min-w-0 rounded-[14px] border border-slate-200 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,.025)] dark:border-slate-800 dark:bg-slate-900", className].filter(Boolean).join(" ")}>
      {title ? (
        <div className="card-heading mb-5">
          <div className="text-[15px] font-bold text-slate-900 dark:text-white">{title}</div>
          {description ? <div className="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">{description}</div> : null}
        </div>
      ) : null}
      {children}
    </section>
  );
}