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

const CARD_CLASS =
  "rounded-lg border border-slate-200 bg-white shadow-lg";
const HEADER_CLASS =
  "flex items-center justify-between border-b border-slate-200 px-5 py-3";
const LABEL_CLASS =
  "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500";
const DESCRIPTION_CLASS = "text-sm text-slate-700";

export interface ReportsListCardHeaderProps {
  label: string;
  description?: string;
  badge?: ReactNode;
}

export function ReportsListCardHeader({
  label,
  description,
  badge,
}: ReportsListCardHeaderProps) {
  return (
    <div className={HEADER_CLASS}>
      <div>
        <p className={LABEL_CLASS}>{label}</p>
        {description != null && (
          <p className={DESCRIPTION_CLASS}>{description}</p>
        )}
      </div>
      {badge != null ? badge : null}
    </div>
  );
}

interface ReportsListCardProps {
  header: ReactNode;
  children: ReactNode;
  className?: string;
}

export function ReportsListCard({
  header,
  children,
  className,
}: ReportsListCardProps) {
  return (
    <div className={cn(CARD_CLASS, className)}>
      {header}
      {children}
    </div>
  );
}