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

interface PageHeaderProps {
  title?: string;
  menuName?: string;
  pageType?: "목록" | "등록" | "상세" | "수정";
  description?: string;
  actions?: ReactNode;
  leftActions?: ReactNode;
  rightActions?: ReactNode;
  icon?: LucideIcon;
  versionBadge?: ReactNode;
  isEditMode?: boolean; // 수정 모드 여부
}

export function PageHeader({ title, menuName, pageType, description, actions, leftActions, rightActions, icon: Icon, versionBadge, isEditMode }: PageHeaderProps) {
  // menuName과 pageType이 제공되면 자동으로 타이틀 생성
  // isEditMode가 true이면 "등록"을 "수정"으로 변경
  let displayTitle = menuName && pageType 
    ? `${menuName.replace('관리', '')} ${pageType}`
    : title || '';
  
  // isEditMode가 true이고 제목에 "등록"이 포함되어 있으면 "수정"으로 변경
  if (isEditMode && displayTitle.includes('등록')) {
    displayTitle = displayTitle.replace('등록', '수정');
  }
  
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0 flex-1">
          {Icon && (
            <div className="p-2 bg-primary/10 rounded-lg flex-shrink-0">
              <Icon className="w-5 h-5 md:w-6 md:h-6 text-primary" />
            </div>
          )}
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="text-lg md:text-2xl font-normal font-bold">{displayTitle}</h1>
              {versionBadge && <div className="flex-shrink-0">{versionBadge}</div>}
            </div>
          </div>
        </div>
      </div>
      {(actions || leftActions || rightActions) && (
        <div className="flex flex-col-reverse md:flex-row gap-2 items-stretch md:items-center md:justify-between">
          <div className="flex gap-2 flex-wrap items-center justify-end md:justify-start">
            {leftActions}
          </div>
          <div className="flex gap-2 flex-wrap items-center justify-end">
            {rightActions || actions}
          </div>
        </div>
      )}
    </div>
  );
}