import { Scale } from 'lucide-react';

import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import { Button } from '@kit/ui/button';
import SelectAnalysisPackages, { IAnalysisPackage } from '@/components/select-analysis-packages';
import { PageBody } from '@kit/ui/page';

import ComparePackagesModal from '../../_components/compare-packages-modal';

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

  return {
    title,
  };
};

const dummyCards = [
  {
    titleKey: 'product:standard.label',
    price: 40,
    nrOfAnalyses: 4,
    tagColor: 'bg-cyan',
    descriptionKey: 'marketing:standard.description',
  },
  {
    titleKey: 'product:standardPlus.label',
    price: 85,
    nrOfAnalyses: 10,

    tagColor: 'bg-warning',
    descriptionKey: 'product:standardPlus.description',
  },
  {
    titleKey: 'product:premium.label',
    price: 140,
    nrOfAnalyses: '12+',

    tagColor: 'bg-purple',
    descriptionKey: 'product:premium.description',
  },
] satisfies IAnalysisPackage[];

async function OrderAnalysisPackagePage() {
  const { t } = await createI18nServerInstance();

  return (
    <PageBody>
      <div className="space-y-3 text-center">
        <h3>{t('marketing:selectPackage')}</h3>
        <ComparePackagesModal
          triggerElement={
            <Button variant="secondary" className="gap-2">
              {t('marketing:comparePackages')}
              <Scale className="size-4 stroke-[1.5px]" />
            </Button>
          }
        />
      </div>
      <SelectAnalysisPackages analysisPackages={dummyCards} />
    </PageBody>
  );
}

export default withI18n(OrderAnalysisPackagePage);
