'use client';

import Image from 'next/image';
import { useTranslation } from 'react-i18next';

import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';

import { PackageHeader } from './package-header';
import { ButtonTooltip } from './ui/button-tooltip';

export interface IAnalysisPackage {
  titleKey: string;
  price: number;
  nrOfAnalyses: number | string;
  tagColor: string;
  descriptionKey: string;
}

const analysisPackages = [
  {
    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[];

export default function SelectAnalysisPackages() {
  const {
    t,
    i18n: { language },
  } = useTranslation();

  return (
    <div className="grid grid-cols-3 gap-6">
      {analysisPackages.length > 0 ? analysisPackages.map(
        (
          { titleKey, price, nrOfAnalyses, tagColor, descriptionKey },
          index,
        ) => {
          return (
            <Card key={index}>
              <CardHeader className="relative">
                <ButtonTooltip
                  content="Content pending"
                  className="absolute top-5 right-5 z-10"
                />
                <Image
                  src="/assets/card-image.png"
                  alt="background"
                  width={326}
                  height={195}
                  className="max-h-48 w-full opacity-10"
                />
              </CardHeader>
              <CardContent className="space-y-1 text-center">
                <PackageHeader
                  title={t(titleKey)}
                  tagColor={tagColor}
                  analysesNr={t('product:nrOfAnalyses', { nr: nrOfAnalyses })}
                  language={language}
                  price={price}
                />
                <CardDescription>
                  <Trans i18nKey={descriptionKey} />
                </CardDescription>
              </CardContent>
              <CardFooter>
                <Button className="w-full">
                  <Trans i18nKey='order-analysis-package:selectThisPackage' />
                </Button>
              </CardFooter>
            </Card>
          );
        },
      ) : (
        <h4>
          <Trans i18nKey='order-analysis-package:noPackagesAvailable' />
        </h4>
      )}
    </div>
  );
}