'use client';

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

import { Trans } from '@kit/ui/makerkit/trans';
import { Separator } from '@kit/ui/separator';

import { TeamAccountBenefitExpensesOverview } from '../../_lib/server/load-team-account-benefit-expenses-overview';

const YearlyExpensesOverview = ({
  employeeCount = 0,
  expensesOverview,
}: {
  employeeCount?: number;
  expensesOverview: TeamAccountBenefitExpensesOverview;
}) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <div className="border-border rounded-lg border p-6">
      <h5>
        <Trans i18nKey="billing:expensesOverview.title" />
      </h5>
      <div className="mt-5 flex justify-between">
        <p className="text-sm font-medium">
          <Trans i18nKey="billing:expensesOverview.employeeCount" />
        </p>
        <span className="text-primary text-sm font-bold">{employeeCount}</span>
      </div>
      <div className="mt-3 flex justify-between">
        <p className="text-sm font-medium">
          <Trans
            i18nKey="billing:expensesOverview.managementFeeTotal"
            values={{
              managementFee: formatCurrency({
                value: expensesOverview.managementFee,
                locale: language,
                currencyCode: 'EUR',
              }),
            }}
          />
        </p>
        <span className="text-sm font-medium">
          {formatCurrency({
            value: expensesOverview.managementFeeTotal,
            locale: language,
            currencyCode: 'EUR',
          })}
        </span>
      </div>
      <div className="mt-3 mb-4 flex justify-between">
        <p className="text-sm font-medium">
          <Trans i18nKey="billing:expensesOverview.currentMonthUsageTotal" />
        </p>
        <span className="text-sm font-medium">
          {formatCurrency({
            value: expensesOverview.currentMonthUsageTotal,
            locale: language,
            currencyCode: 'EUR',
          })}
        </span>
      </div>
      <Separator />
      <div className="mt-4 flex justify-between">
        <p className="font-semibold">
          <Trans i18nKey="billing:expensesOverview.total" />
        </p>
        <span className="font-semibold">
          {formatCurrency({
            value: expensesOverview.total,
            locale: language,
            currencyCode: 'EUR',
          })}
        </span>
      </div>
    </div>
  );
};

export default YearlyExpensesOverview;