"use client";

import { ArrowLeft, HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  showBackButton?: boolean;
  onBack?: () => void;
  showHelpButton?: boolean;
  onHelp?: () => void;
  children?: React.ReactNode;
  className?: string;
}

export function PageHeader({
  title,
  subtitle,
  showBackButton = false,
  onBack,
  showHelpButton = false,
  onHelp,
  children,
  className,
}: PageHeaderProps) {
  return (
    <div className={cn("flex items-center justify-between border-b border-slate-200 pb-6", className)}>
      <div className="flex items-center space-x-4">
        {showBackButton && (
          <Button variant="ghost" size="sm" onClick={onBack} className="h-8 w-8 p-0">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        )}

        <div>
          <h1 className="text-2xl font-bold text-slate-900">{title}</h1>
          {subtitle && <p className="mt-1 text-sm text-slate-600">{subtitle}</p>}
        </div>
      </div>

      <div className="flex items-center space-x-2">
        {children}
        {showHelpButton && (
          <Button variant="outline" size="sm" onClick={onHelp} className="h-8 w-8 p-0">
            <HelpCircle className="h-4 w-4" />
          </Button>
        )}
      </div>
    </div>
  );
}

// 페이지 헤더 액션 버튼 컴포넌트
export function PageHeaderActions({ children, className }: { children: React.ReactNode; className?: string }) {
  return <div className={cn("flex items-center space-x-2", className)}>{children}</div>;
}