import type { ReactNode } from "react";

export function Card({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div
      className={[
        "rounded-2xl border border-border bg-surface shadow-sm",
        className ?? "",
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {children}
    </div>
  );
}

export function CardHeader({ children }: { children: ReactNode }) {
  return <div className="px-6 pt-6 pb-2">{children}</div>;
}

export function CardTitle({ children }: { children: ReactNode }) {
  return (
    <h1 className="text-xl font-semibold tracking-tight text-foreground">
      {children}
    </h1>
  );
}

export function CardDescription({ children }: { children: ReactNode }) {
  return <p className="mt-1 text-sm text-muted">{children}</p>;
}

export function CardBody({ children }: { children: ReactNode }) {
  return <div className="px-6 py-4">{children}</div>;
}

export function CardFooter({ children }: { children: ReactNode }) {
  return <div className="px-6 pb-6 pt-2">{children}</div>;
}