"use client";

/**
 * Card chrome primitives — rounded white surface with optional
 * header strip + body padding. Replaces the ~10 inline copies of
 * <div className="bg-white border border-slate-200 rounded-xl ..."/>
 * scattered through the admin pages so a future visual tweak
 * lands in one place.
 */

import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";

interface CardProps {
  children: ReactNode;
  className?: string;
  /** When false, drops the border + shadow so the card reads as a
   *  plain panel inside another card. */
  bordered?: boolean;
}

export function Card({ children, className = "", bordered = true }: CardProps) {
  return (
    <div
      className={`bg-white rounded-xl overflow-hidden ${
        bordered ? "border border-slate-100 shadow-sm" : ""
      } ${className}`}
    >
      {children}
    </div>
  );
}

interface CardHeaderProps {
  title: string;
  subtitle?: string;
  icon?: LucideIcon;
  /** Right-aligned slot — refresh / filter / external-link, etc. */
  right?: ReactNode;
}

export function CardHeader({ title, subtitle, icon: Icon, right }: CardHeaderProps) {
  return (
    <div className="px-4 py-3 border-b border-slate-100 flex items-center gap-2">
      {Icon && <Icon className="w-4 h-4 text-slate-600" />}
      <div className="min-w-0 flex-1">
        <h3 className="font-semibold text-slate-900 text-sm leading-tight truncate">{title}</h3>
        {subtitle && <p className="text-[11px] text-slate-500 mt-0.5 truncate">{subtitle}</p>}
      </div>
      {right && <div className="shrink-0">{right}</div>}
    </div>
  );
}

/** Body wrapper with default padding — opt out by passing className with p-0. */
export function CardBody({ children, className = "" }: { children: ReactNode; className?: string }) {
  return <div className={`p-4 ${className}`}>{children}</div>;
}
