import { ReactNode } from "react";

export default function Card({
  children,
  className = "",
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={`rounded-card border border-sand-dark/60 bg-white shadow-card ${className}`}>
      {children}
    </div>
  );
}

export function CardHeader({ title, action }: { title: string; action?: ReactNode }) {
  return (
    <div className="flex items-center justify-between border-b border-sand-dark/60 px-5 py-4">
      <h2 className="text-base font-bold text-ink">{title}</h2>
      {action}
    </div>
  );
}