import React from 'react';
import { Typography, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useRouter } from 'next/navigation';

const { Title } = Typography;

interface PageHeaderProps {
  title: React.ReactNode;
  isBack?: boolean;
  onBack?: () => void;
  extra?: React.ReactNode;
  leftExtra?: React.ReactNode;
  headerClass?: string;
}

const PageHeader: React.FC<PageHeaderProps> = ({ title, onBack, extra, leftExtra, isBack = true, headerClass = '' }) => {
  const router = useRouter();

  const handleBack = () => {
    if (onBack && typeof onBack === 'function') {
      onBack();
    } else {
      router.back();
    }
  };

  return (
    <div className={`page-header-section ${headerClass}`}>
      <div className="page-header-left">
        {
          isBack && <Button icon={<ArrowLeftOutlined />} type='text' onClick={handleBack} className='page-back-arrow mr-3' />
        }

        <Title level={2} className="page-header-title">
          {title}
        </Title>
        {leftExtra && <div className="page-header-left-extra">{leftExtra}</div>}
      </div>
      {extra && <div className="page-header-extra">{extra}</div>}
    </div>
  );
};

export default PageHeader;