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

interface StaticPageLayoutProps {
  onNavigateBack: () => void;
  title: string;
  children?: React.ReactNode;
}

const StaticPageLayout = ({ onNavigateBack, title, children }: StaticPageLayoutProps) => {
  const { t } = useTranslation();

  return (
    <div className="mx-auto max-w-4xl px-4 py-16 sm:py-24">
      <Button
        variant="ghost"
        onClick={onNavigateBack}
        className="mb-8 -ml-4 text-base text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="h-4 mr-2 text-current w-4" />
        {t('organizationPage.navigateBack')}
      </Button>
      <div className="prose max-w-none">
        <h1>{title}</h1>
        {children}
      </div>
    </div>
  );
};

export default StaticPageLayout;