import { Scale } from 'lucide-react';

import SelectAnalysisPackages from '@kit/shared/components/select-analysis-packages';
import { Button } from '@kit/ui/button';
import { PageBody } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';

import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';

import ComparePackagesModal from '../../_components/compare-packages-modal';
import { loadAnalysisPackages } from '../../_lib/server/load-analysis-packages';

export const generateMetadata = async () => {
  const i18n = await createI18nServerInstance();
  const title = i18n.t('order-analysis-package:title');

  return {
    title,
  };
};

async function OrderAnalysisPackagePage() {
  const { analysisPackageElements, analysisPackages, countryCode } =
    await loadAnalysisPackages();

  return (
    <PageBody>
      <div className="space-y-3 text-center">
        <h3>
          <Trans i18nKey="order-analysis-package:selectPackage" />
        </h3>
        <ComparePackagesModal
          analysisPackages={analysisPackages}
          analysisPackageElements={analysisPackageElements}
          triggerElement={
            <Button variant="secondary" className="gap-2">
              <Trans i18nKey="order-analysis-package:comparePackages" />
              <Scale className="size-4 stroke-[1.5px]" />
            </Button>
          }
          countryCode={countryCode}
        />
      </div>
      <SelectAnalysisPackages
        analysisPackages={analysisPackages}
        countryCode={countryCode}
      />
    </PageBody>
  );
}

export default withI18n(OrderAnalysisPackagePage);