import { ReactNode } from 'react';
import { Head } from '@inertiajs/react';
import AdminLayout from '@/layouts/AdminLayout';
import { useAuth } from '@/hooks/useAuth';
import ComplianceDocs from '@/components/company-portal/ComplianceDocs';

const ComplianceDocsPage = () => {
  const { companyId } = useAuth();

  if (!companyId) {
    return (
      <>
        <Head title="Compliance Documents" />
        <div className="text-center py-12 text-muted-foreground">
          No company associated with your account.
        </div>
      </>
    );
  }

  return (
    <>
      <Head title="Compliance Documents" />
      <div>
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-foreground">Compliance Documents</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Generate toolbox talks, permits to work, and site induction templates
          </p>
        </div>
        <ComplianceDocs companyId={companyId} />
      </div>
    </>
  );
};

ComplianceDocsPage.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default ComplianceDocsPage;
