medreport_mrb2b/app/home/[account]/_components/team-account-benefit-statistics.tsx

import React, { use } from 'react';

import { redirect } from 'next/navigation';

import { formatCurrency } from '@/packages/shared/src/utils';
import { PiggyBankIcon, Settings } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { Card, CardTitle } from '@kit/ui/card';
import { Button } from '@kit/ui/shadcn/button';
import { Trans } from '@kit/ui/trans';

import pathsConfig from '~/config/paths.config';
import { createPath } from '~/config/team-account-navigation.config';

interface TeamAccountBenefitStatisticsProps {
  accountSlug: string;
}

const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
  return <Card className="p-4">{children}</Card>;
};

const StatisticsCardTitle = ({ children }: { children: React.ReactNode }) => {
  return <CardTitle className="text-sm font-medium">{children}</CardTitle>;
};

const StatisticsDescription = ({ children }: { children: React.ReactNode }) => {
  return <p className="text-success text-xs">{children}</p>;
};

const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
  return <h4 className="">{children}</h4>;
};

const TeamAccountBenefitStatistics = ({
  accountSlug,
}: TeamAccountBenefitStatisticsProps) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <div className="flex h-full w-full flex-col gap-2 sm:flex-row">
      <Card className="relative flex flex-row">
        <div className="p-6">
          <Button
            onClick={() =>
              redirect(createPath(pathsConfig.app.accountBilling, accountSlug))
            }
            variant="outline"
            className="absolute top-1 right-1 p-3"
          >
            <Settings />
          </Button>
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
            <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
          </div>
          <p className="mt-4 text-sm font-medium">
            <Trans i18nKey="teams:benefitStatistics.budget.title" />
          </p>
          <h3 className="text-2xl">
            <Trans
              i18nKey="teams:benefitStatistics.budget.balance"
              values={{
                balance: formatCurrency({
                  value: 11800,
                  locale: language,
                  currencyCode: 'EUR',
                }),
              }}
            />
          </h3>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.budget.volume"
              values={{
                volume: formatCurrency({
                  value: 15000,
                  locale: language,
                  currencyCode: 'EUR',
                }),
              }}
            />
          </StatisticsDescription>
        </div>
      </Card>

      <div className="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
        <StatisticsCard>
          <StatisticsCardTitle>Analüüsid</StatisticsCardTitle>
          <StatisticsValue>18 %</StatisticsValue>
          <StatisticsDescription>36 broneeringut</StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>Eriarstid ja spetsialistid</StatisticsCardTitle>
          <StatisticsValue>22 %</StatisticsValue>
          <StatisticsDescription>44 broneeringut</StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>Uuringud</StatisticsCardTitle>
          <StatisticsValue>20 %</StatisticsValue>
          <StatisticsDescription>40 broneeringut</StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>E-konsultatsioon</StatisticsCardTitle>
          <StatisticsValue>17 %</StatisticsValue>
          <StatisticsDescription>34 broneeringut</StatisticsDescription>
        </StatisticsCard>
        <Card className="col-span-2 p-4">
          <StatisticsCardTitle>Terviseuuringute paketid</StatisticsCardTitle>
          <div className="grid grid-cols-2 gap-2">
            <div className="border-r">
              <StatisticsValue>23 %</StatisticsValue>
              <StatisticsDescription>46 teenuse kasutust</StatisticsDescription>
            </div>
            <div className="ml-4">
              <StatisticsValue>1800 €</StatisticsValue>
              <StatisticsDescription>Teenuste summa</StatisticsDescription>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default TeamAccountBenefitStatistics;