'use client';

import { useT } from '@/lib/i18n/react';
import { interpolate } from '@/lib/i18n/interpolate';
import { formatAgorotShekels } from '@/lib/money';
import { SharedStatCard } from '@/components/ui/admin/SharedStatCard';
import type { EarningsOverviewStats } from '@/server/admin/resources/earnings/overview';

type Props = EarningsOverviewStats;

export function EarningsOverview({
  pendingPayouts,
  pendingAmountAgorot,
  paidThisMonth,
  disputedPayouts,
}: Props) {
  const t = useT('admin_earnings');
  return (
    <div className="grid grid-cols-2 gap-4 p-4 lg:grid-cols-4">
      <SharedStatCard
        label={t('overview_due')}
        tooltip={t('tooltip_kpi_pending_amount')}
        value={formatAgorotShekels(pendingAmountAgorot)}
        href="/admin/settlements"
        linkHint={t('overview_go_settlements')}
      />
      <SharedStatCard label={t('overview_pending_payouts')} value={pendingPayouts} />
      <SharedStatCard
        label={t('overview_paid_this_month')}
        tooltip={t('tooltip_kpi_paid_month')}
        value={interpolate(t('overview_paid_count'), { count: paidThisMonth })}
      />
      <SharedStatCard
        label={t('overview_disputed')}
        tooltip={t('tooltip_kpi_disputed')}
        value={disputedPayouts}
        tone={disputedPayouts > 0 ? 'warning' : 'default'}
        href="/admin/settlements"
      />
    </div>
  );
}