'use client';

import React from 'react';

import { InfoTooltip } from '@/packages/shared/src/components/ui/info-tooltip';
import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';

import { Trans } from '@kit/ui/makerkit/trans';
import { TableCell, TableRow } from '@kit/ui/shadcn/table';

import { CheckWithBackground } from './check-with-background';

const DefaultPackageFeaturesRows = () => {
  return (
    <>
      <TableRow key="digital-doctor-feedback">
        <TableCell className="relative max-w-[30vw] py-6">
          <Trans i18nKey="order-analysis-package:digitalDoctorFeedback" />
          <InfoTooltip
            content={
              <Trans i18nKey="order-analysis-package:digitalDoctorFeedbackInfo" />
            }
            icon={
              <QuestionMarkCircledIcon className="absolute top-2 right-0 size-5 sm:static sm:ml-2 sm:size-4" />
            }
          />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
      </TableRow>

      <TableRow key="give-analyses">
        <TableCell className="py-6 sm:max-w-[30vw]">
          <Trans i18nKey="order-analysis-package:giveAnalyses" />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
        <TableCell align="center" className="py-6">
          <CheckWithBackground />
        </TableCell>
      </TableRow>
    </>
  );
};

export default DefaultPackageFeaturesRows;