AgendaPro/src/components/ui.tsx

import { Loader2 } from "lucide-react";

export function Spinner({ className = "" }: { className?: string }) {
  return <Loader2 className={`h-4 w-4 animate-spin ${className}`} />;
}

/**
 * Fallback de Suspense para las rutas que se cargan por demanda (calendario y
 * tablero, que arrastran FullCalendar y recharts). Ocupa el alto disponible para
 * que el shell no dé un salto de layout al resolverse el chunk.
 */
export function RouteSpinner() {
  return (
    <div className="flex flex-1 items-center justify-center py-16 text-slate-400">
      <Loader2 className="h-6 w-6 animate-spin" />
    </div>
  );
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon?: React.ComponentType<{ className?: string }>;
  title: string;
  description?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 px-6 py-12 text-center">
      {Icon && (
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
          <Icon className="h-6 w-6" />
        </div>
      )}
      <div>
        <div className="text-sm font-bold text-slate-900">{title}</div>
        {description && <p className="mt-1 text-sm text-slate-500">{description}</p>}
      </div>
      {action}
    </div>
  );
}

export function PageHeader({
  title,
  subtitle,
  actions,
}: {
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
}) {
  return (
    <div className="flex shrink-0 flex-col gap-3 px-5 pt-5 sm:px-7 sm:pt-7 md:flex-row md:items-end md:justify-between">
      <div>
        <h1 className="text-xl font-extrabold tracking-tight text-slate-900 sm:text-2xl">{title}</h1>
        {/* El subtítulo se oculta en teléfono: son 2 líneas de texto descriptivo
            (~70px) que en una pantalla de 390px le hacen falta al contenido, y
            en el calendario además describe gestos de ratón ("arrastra",
            "redimensiona") que no aplican al tacto. */}
        {subtitle && <p className="mt-1 hidden text-sm text-slate-500 sm:block">{subtitle}</p>}
      </div>
      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
    </div>
  );
}

export function Badge({
  children,
  bg,
  fg,
  dot,
}: {
  children: React.ReactNode;
  bg?: string;
  fg?: string;
  dot?: string;
}) {
  return (
    <span className="chip" style={{ background: bg ?? "#f3f4f6", color: fg ?? "#374151" }}>
      {dot && <span className="h-1.5 w-1.5 rounded-full" style={{ background: dot }} />}
      {children}
    </span>
  );
}

export function Avatar({
  name,
  color,
  size = 36,
}: {
  name: string;
  color?: string;
  size?: number;
}) {
  const init = name
    .split(" ")
    .filter(Boolean)
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase())
    .join("");
  return (
    <div
      className="flex shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
      style={{ background: color ?? "#3b66ff", width: size, height: size, fontSize: size * 0.35 }}
    >
      {init}
    </div>
  );
}