medreport_mrb2b/app/home/(user)/_components/compare-packages-modal.tsx

import { JSX } from 'react';

import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Check, X } from 'lucide-react';

import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from '@kit/ui/dialog';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@kit/ui/table';
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import { PackageHeader } from '@/components/package-header';
import { InfoTooltip } from '@/components/ui/info-tooltip';

const dummyCards = [
  {
    titleKey: 'product:standard.label',
    price: 40,
    nrOfAnalyses: 4,
    tagColor: 'bg-cyan',
  },
  {
    titleKey: 'product:standardPlus.label',
    price: 85,
    nrOfAnalyses: 10,
    tagColor: 'bg-warning',
  },
  {
    titleKey: 'product:premium.label',
    price: 140,
    nrOfAnalyses: '12+',
    tagColor: 'bg-purple',
  },
];

const dummyRows = [
  {
    analysisNameKey: 'product:clinicalBloodDraw.label',
    tooltipContentKey: 'product:clinicalBloodDraw.description',
    includedInStandard: 1,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:crp.label',
    tooltipContentKey: 'product:crp.description',
    includedInStandard: 1,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:ferritin.label',
    tooltipContentKey: 'product:ferritin.description',
    includedInStandard: 0,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:vitaminD.label',
    tooltipContentKey: 'product:vitaminD.description',
    includedInStandard: 0,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:glucose.label',
    tooltipContentKey: 'product:glucose.description',
    includedInStandard: 1,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:alat.label',
    tooltipContentKey: 'product:alat.description',
    includedInStandard: 1,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
  {
    analysisNameKey: 'product:ast.label',
    tooltipContentKey: 'product:ast.description',
    includedInStandard: 1,
    includedInStandardPlus: 1,
    includedInPremium: 1,
  },
];

const CheckWithBackground = () => {
  return (
    <div className="bg-primary w-min rounded-full p-1 text-white">
      <Check className="size-3 stroke-2" />
    </div>
  );
};

const ComparePackagesModal = async ({
  triggerElement,
}: {
  triggerElement: JSX.Element;
}) => {
  const { t, language } = await createI18nServerInstance();

  return (
    <Dialog>
      <DialogTrigger asChild>{triggerElement}</DialogTrigger>
      <DialogContent
        className="min-h-screen max-w-fit min-w-screen"
        customClose={
          <div className="inline-flex place-items-center-safe gap-1 align-middle">
            <p className="text-sm font-medium text-black">
              {t('common:close')}
            </p>
            <X className="text-black" />
          </div>
        }
        preventAutoFocus
      >
        <VisuallyHidden>
          <DialogTitle>{t('common:comparePackages')}</DialogTitle>
        </VisuallyHidden>
        <div className="m-auto">
          <div className="space-y-6 text-center">
            <h3>{t('product:healthPackageComparison.label')}</h3>
            <p className="text-muted-foreground mx-auto w-3/5 text-sm">
              {t('product:healthPackageComparison.description')}
            </p>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead></TableHead>
                    {dummyCards.map(
                      ({ titleKey, price, nrOfAnalyses, tagColor }) => (
                        <TableHead key={titleKey} className="py-2">
                          <PackageHeader
                            title={t(titleKey)}
                            tagColor={tagColor}
                            analysesNr={t('product:nrOfAnalyses', {
                              nr: nrOfAnalyses,
                            })}
                            language={language}
                            price={price}
                          />
                        </TableHead>
                      ),
                    )}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {dummyRows.map(
                    (
                      {
                        analysisNameKey,
                        tooltipContentKey,
                        includedInStandard,
                        includedInStandardPlus,
                        includedInPremium,
                      },
                      index,
                    ) => (
                      <TableRow key={index}>
                        <TableCell className="py-6">
                          {t(analysisNameKey)}{' '}
                          <InfoTooltip
                            content={t(tooltipContentKey)}
                            icon={<QuestionMarkCircledIcon />}
                          />
                        </TableCell>
                        <TableCell align="center" className="py-6">
                          {!!includedInStandard && <CheckWithBackground />}
                        </TableCell>
                        <TableCell align="center" className="py-6">
                          {!!includedInStandardPlus && <CheckWithBackground />}
                        </TableCell>
                        <TableCell align="center" className="py-6">
                          {!!includedInPremium && <CheckWithBackground />}
                        </TableCell>
                      </TableRow>
                    ),
                  )}
                </TableBody>
              </Table>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default withI18n(ComparePackagesModal);