import { ReactNode } from 'react';

/**
 * ViewHeader Component
 *
 * Compact page header that sits naturally alongside the sidebar.
 * Clean, minimal design with optional icon, subtitle, badge, and actions.
 *
 * @component
 * @layer Presentation
 */

interface ViewHeaderProps {
  title: string | ReactNode;
  subtitle?: string;
  icon?: ReactNode;
  actions?: ReactNode;
  rightContent?: ReactNode;
  breadcrumbs?: ReactNode;
  gradient?: boolean;
  badge?: string;
  badgeColor?: 'blue' | 'green' | 'purple' | 'orange' | 'gray';
  className?: string;
}

const badgeColors = {
  blue: 'bg-blue-50 text-blue-700 ring-blue-600/20',
  green: 'bg-green-50 text-green-700 ring-green-600/20',
  purple: 'bg-purple-50 text-purple-700 ring-purple-600/20',
  orange: 'bg-orange-50 text-orange-700 ring-orange-600/20',
  gray: 'bg-gray-50 text-gray-600 ring-gray-500/20',
};

export function ViewHeader({
  title,
  subtitle,
  icon,
  actions,
  rightContent,
  breadcrumbs,
  badge,
  badgeColor = 'blue',
  className = '',
}: ViewHeaderProps) {
  const rightSideContent = rightContent || actions;

  return (
    <div className={`border-b border-border bg-card ${className}`}>
      <div className="max-w-6xl mx-auto w-full px-8 py-5">
        {breadcrumbs && <div className="mb-3">{breadcrumbs}</div>}

        <div className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-3 min-w-0">
            {icon && (
              <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
                {icon}
              </div>
            )}

            <div className="min-w-0">
              <div className="flex items-center gap-2.5">
                {typeof title === 'string' ? (
                  <h1 className="text-lg font-semibold text-foreground truncate">{title}</h1>
                ) : (
                  title
                )}
                {badge && (
                  <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ring-1 ring-inset ${badgeColors[badgeColor]}`}>
                    {badge}
                  </span>
                )}
              </div>
              {subtitle && (
                <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>
              )}
            </div>
          </div>

          {rightSideContent && (
            <div className="flex-shrink-0">{rightSideContent}</div>
          )}
        </div>
      </div>
    </div>
  );
}