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

'use client';

import { redirect } from 'next/navigation';

import { Database } from '@/packages/supabase/src/database.types';
import { ChevronRight, Euro, User } from 'lucide-react';

import { Card } from '@kit/ui/card';
import { Trans } from '@kit/ui/makerkit/trans';

import { pathsConfig } from '@kit/shared/config';

import { createPath } from '@kit/shared/config/team-account-navigation.config';

import TeamAccountBenefitStatistics from './team-account-benefit-statistics';
import TeamAccountHealthDetails from './team-account-health-details';

export interface TeamAccountStatisticsProps {
  teamAccount: Database['medreport']['Tables']['accounts']['Row'];
  memberParams: Pick<
    Database['medreport']['Tables']['account_params']['Row'],
    'weight' | 'height'
  >[];
}

export default function TeamAccountStatistics({
  teamAccount,
  memberParams,
}: TeamAccountStatisticsProps) {
  return (
    <div
      className={
        'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
      }
    >
      <TeamAccountBenefitStatistics accountSlug={teamAccount.slug || ''} />

      <h5 className="mt-4 mb-2">
        <Trans i18nKey="teams:home.healthDetails" />
      </h5>
      <div className="flex flex-col gap-2 sm:flex-row">
        <TeamAccountHealthDetails memberParams={memberParams} />

        <div className="flex flex-col gap-2">
          <Card
            variant="gradient-success"
            className="border-success/50 hover:bg-success/20 relative flex h-full cursor-pointer flex-col justify-center px-6 py-4 transition-colors"
            onClick={() =>
              redirect(
                createPath(
                  pathsConfig.app.accountMembers,
                  teamAccount.slug || '',
                ),
              )
            }
          >
            <div className="flex flex-col">
              <div className="border-input absolute top-2 right-2 rounded-md border bg-white p-3">
                <ChevronRight className="stroke-2" />
              </div>
              <div className="bg-primary/10 w-fit rounded-2xl p-2">
                <User color="green" className="stroke-2" />
              </div>
              <span className="mt-4 mb-2 text-lg font-semibold">
                <Trans i18nKey="teams:home.membersSettingsButtonTitle" />
              </span>
              <p className="text-muted-foreground text-sm">
                <Trans i18nKey="teams:home.membersSettingsButtonDescription" />
              </p>
            </div>
          </Card>

          <Card
            variant="gradient-warning"
            className="border-warning/40 hover:bg-warning/20 relative flex h-full cursor-pointer flex-col justify-center px-6 py-4 transition-colors"
            onClick={() =>
              redirect(
                createPath(
                  pathsConfig.app.accountBilling,
                  teamAccount.slug || '',
                ),
              )
            }
          >
            <div className="border-input absolute top-2 right-2 rounded-md border bg-white p-3">
              <ChevronRight className="stroke-2" />
            </div>
            <div className="bg-warning/10 w-fit rounded-2xl p-2">
              <Euro color="orange" className="stroke-2" />
            </div>
            <span className="mt-4 mb-2 text-lg font-semibold">
              <Trans i18nKey="teams:home.membersBillingButtonTitle" />
            </span>
            <p className="text-muted-foreground text-sm">
              <Trans i18nKey="teams:home.membersBillingButtonDescription" />
            </p>
          </Card>
        </div>
      </div>
    </div>
  );
}