import Link from 'next/link';

import { CaretRightIcon } from '@radix-ui/react-icons';
import { Scale } from 'lucide-react';
import { Trans } from '@kit/ui/trans';

import { Button } from '@kit/ui/button';

import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import SelectAnalysisPackages from '@/components/select-analysis-packages';

import { MedReportLogo } from '../../components/med-report-logo';
import pathsConfig from '../../config/paths.config';
import ComparePackagesModal from '../home/(user)/_components/compare-packages-modal';

export const generateMetadata = async () => {
  const { t } = await createI18nServerInstance();

  return {
    title: t('marketing:pricing'),
  };
};

async function SelectPackagePage() {
  return (
    <div className="container mx-auto my-24 flex flex-col items-center space-y-12">
      <MedReportLogo />
      <div className="space-y-3 text-center">
        <h3>
          <Trans i18nKey={'marketing:selectPackage'} />
        </h3>
        <ComparePackagesModal
          triggerElement={
            <Button variant="secondary" className="gap-2">
              <Trans i18nKey={'marketing:comparePackages'} />
              <Scale className="size-4 stroke-[1.5px]" />
            </Button>
          }
        />
      </div>
      <SelectAnalysisPackages />
      <Link href={pathsConfig.app.home}>
        <Button variant="secondary" className="align-center">
          <Trans i18nKey={'marketing:notInterestedInAudit'} />{' '}
          <CaretRightIcon className="size-4" />
        </Button>
      </Link>
    </div>
  );
}

export default withI18n(SelectPackagePage);