import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

interface Props { children: ReactNode; className?: string; hover?: boolean; padding?: boolean }

export function Card({ children, className, hover = false, padding = true }: Props) {
  return (
    <div className={cn(
      "bg-white rounded-lg border border-slate-200/60 shadow-card",
      hover && "hover:shadow-elevated hover:border-slate-300/60 transition-all duration-200 cursor-pointer",
      padding && "px-5 py-4",
      className,
    )}>
      {children}
    </div>
  );
}

export function CardHeader({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("flex items-center gap-2 pb-3 mb-3 border-b border-slate-100", className)}>{children}</div>;
}

export function CardTitle({ children, className }: { children: ReactNode; className?: string }) {
  return <h3 className={cn("text-sm font-bold text-slate-900", className)}>{children}</h3>;
}
