import React from "react";

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

export function Card({ title, children, className = "" }: CardProps) {
  return (
    <div className={`flex flex-col gap-3 p-[18px] md:p-[24px] rounded-[14px] md:rounded-[18px] border border-[var(--p-border)] bg-[var(--p-surface-2)] ${className}`}>
      {title && (
        <h3 className="font-sans font-semibold text-[15px] md:text-[16px] text-[var(--p-text)] tracking-tight m-0">
          {title}
        </h3>
      )}
      <div className="flex-1 min-h-0">
        {children}
      </div>
    </div>
  );
}