import React from 'react';
import { ArrowLeft } from 'lucide-react';
import Button from '@/components/ui/Button.tsx';
import { Heading, Text } from '@/components/ui/Typography.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

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

const PageHeader = ({ title, subtitle, onBack, children }: PageHeaderProps) => {
  const { t } = useTranslation();

  return (
    <header className="mb-8">
      {onBack && (
        <Button
          variant="ghost"
          onClick={onBack}
          className="mb-4 -ml-4 text-muted-foreground hover:text-foreground"
        >
          <ArrowLeft className="h-4 mr-2 text-current w-4" />
          {t('organizationPage.navigateBack')}
        </Button>
      )}
      <div className="flex items-center justify-between">
        <div>
          <Heading level="h1">{title}</Heading>
          {subtitle && (
            <Text variant="muted" className="mt-1 text-base sm:text-lg">
              {subtitle}
            </Text>
          )}
        </div>
        {children && <div className="flex items-center space-x-2">{children}</div>}
      </div>
    </header>
  );
};

export default PageHeader;