import * as React from 'react';
import { cn } from '@/lib/utils';

export interface CompactHeaderProps extends React.HTMLAttributes<HTMLElement> {
  /** Logo node. */
  logo?: React.ReactNode;
  /** Breadcrumb / tiêu đề ngắn. */
  breadcrumb?: React.ReactNode;
  /** Khối search (input/dropdown). */
  search?: React.ReactNode;
  /** Action phía phải (avatar, notif, theme toggle). */
  actions?: React.ReactNode;
}

/**
 * Header compact (h: 48px) dạng terminal financial.
 * Dùng thay cho header card/spacious trước đây.
 */
export function CompactHeader({
  logo,
  breadcrumb,
  search,
  actions,
  className,
  ...rest
}: CompactHeaderProps) {
  return (
    <header
      className={cn(
        'sticky top-0 z-30 flex h-header-compact items-center gap-3 border-b border-border bg-background-elevated px-4',
        className,
      )}
      {...rest}
    >
      {logo ? <div className="flex items-center">{logo}</div> : null}
      {breadcrumb ? (
        <div className="flex items-center text-data-sm text-foreground-muted">
          {breadcrumb}
        </div>
      ) : null}
      {search ? <div className="ml-4 hidden max-w-md flex-1 md:block">{search}</div> : null}
      <div className="ml-auto flex items-center gap-2">{actions}</div>
    </header>
  );
}