import { Button } from '~/components/ui/Button';

interface PageHeaderProps {
  title: string;
  onSave?: () => void;
  onBack?: () => void;
  showSaveButton?: boolean;
  showBackButton?: boolean;
}

export function PageHeader({
  title,
  onSave,
  onBack,
  showSaveButton = true,
  showBackButton = true
}: PageHeaderProps) {
  return (
    <div className="flex justify-between items-center pb-2 mb-4 border-b border-gray-200">
      <h1 className="text-xl font-medium text-gray-800">{title}</h1>
      <div className="flex items-center gap-2">
        {showBackButton && (
          <Button 
            type="default" 
            className=" focus:!ring-gray-300"
            onClick={onBack}
            icon="ri-arrow-left-line"
          >
            返回
          </Button>
        )}
        {showSaveButton && (
          <button
            type="button"
            className="ant-btn ant-btn-primary"
            onClick={onSave}
          >
            <i className="ri-save-line mr-1"></i> 保存
          </button>
        )}
      </div>
    </div>
  );
}