import { type ReactNode } from 'react';
import { type LucideIcon } from 'lucide-react';
import { cn } from '@lib/utils/cn';
import { Badge } from '@shared/components/ui/badge';

/**
 * PageHeader — 페이지 최상단 제목/설명/액션 헤더
 *
 * 구성:
 *   [좌] 아이콘 + 제목 + 설명 + (선택) 데모 배지
 *   [우] 액션 슬롯 (검색/필터/버튼 등)
 *
 * 사용:
 *   <PageHeader title="대시보드" description="실시간 종합 상황판" />
 *
 *   <PageHeader
 *     icon={Shield}
 *     title="권한 관리"
 *     description="사용자/역할/권한 설정"
 *     demo
 *     actions={<Button variant="primary">저장</Button>}
 *   />
 */
export interface PageHeaderProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  /** 아이콘 색상 클래스 (text-blue-400 등). 미지정 시 text-muted-foreground */
  iconColor?: string;
  /** 데모 데이터 배지 노출 */
  demo?: boolean;
  /** 우측 액션 슬롯 */
  actions?: ReactNode;
  className?: string;
}

export function PageHeader({
  title,
  description,
  icon: Icon,
  iconColor = 'text-muted-foreground',
  demo = false,
  actions,
  className,
}: PageHeaderProps) {
  return (
    <div className={cn('flex items-start justify-between gap-4', className)}>
      <div className="min-w-0 flex-1">
        <h2 className="text-lg font-bold text-heading whitespace-nowrap flex items-center gap-2">
          {Icon && <Icon className={cn('w-5 h-5', iconColor)} />}
          {title}
          {demo && (
            <Badge intent="warning" size="xs" className="font-normal">
              데모 데이터
            </Badge>
          )}
        </h2>
        {description && <p className="text-[11px] text-hint mt-0.5">{description}</p>}
      </div>
      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
    </div>
  );
}
