"use client";

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

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  icon?: LucideIcon;
  /** Classe de teinte de l'icône, ex. "text-amber-500 bg-amber-500/10" */
  tone?: string;
  actions?: React.ReactNode;
  className?: string;
  /** Style compact (barre d'explorateur) */
  compact?: boolean;
}

/** En-tête de page standard SPB Cloud v3. */
export default function PageHeader({ title, subtitle, icon: Icon, tone = "text-blue-600 bg-blue-500/10 dark:text-blue-300", actions, className = "", compact }: PageHeaderProps) {
  return (
    <div className={`flex items-start sm:items-center justify-between gap-3 ${compact ? "py-3" : "py-4 sm:py-5"} ${className}`}>
      <div className="flex items-center gap-3 min-w-0">
        {Icon && (
          <div className={`w-10 h-10 rounded-2xl flex items-center justify-center shrink-0 ${tone}`}>
            <Icon className="w-5 h-5" />
          </div>
        )}
        <div className="min-w-0">
          <h1 className={`${compact ? "text-lg" : "text-xl sm:text-2xl"} font-semibold tracking-tight text-gray-900 dark:text-white truncate`}>{title}</h1>
          {subtitle && <p className="text-[13px] text-gray-500 dark:text-gray-400 mt-0.5 truncate">{subtitle}</p>}
        </div>
      </div>
      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
    </div>
  );
}

export function EmptyState({ icon: Icon, title, description, action }: { icon: LucideIcon; title: string; description?: string; action?: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-16 px-6">
      <div className="relative mb-5">
        <div className="absolute inset-0 rounded-full bg-blue-500/10 blur-2xl scale-150" />
        <div className="relative w-16 h-16 rounded-3xl bg-gray-100 dark:bg-white/5 border border-line dark:border-white/10 flex items-center justify-center">
          <Icon className="w-7 h-7 text-gray-400 dark:text-gray-500" />
        </div>
      </div>
      <p className="text-base font-medium text-gray-800 dark:text-gray-200">{title}</p>
      {description && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 max-w-sm">{description}</p>}
      {action && <div className="mt-5">{action}</div>}
    </div>
  );
}