import { ReactNode } from "react";

const CARD_CLASS =
  "rounded-lg border border-slate-200 bg-white shadow-sm";
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";

interface WidgetListCardHeaderProps {
  label: string;
  description: string;
  badge: ReactNode;
}

export function WidgetListCardHeader({
  label,
  description,
  badge,
}: WidgetListCardHeaderProps) {
  return (
    <div className={HEADER_CLASS}>
      <div>
        <p className={LABEL_CLASS}>{label}</p>
        <p className={DESCRIPTION_CLASS}>{description}</p>
      </div>
      {badge}
    </div>
  );
}

interface WidgetListCardProps {
  header: ReactNode;
  children: ReactNode;
}

export function WidgetListCard({ header, children }: WidgetListCardProps) {
  return (
    <div className={CARD_CLASS}>
      {header}
      {children}
    </div>
  );
}