'use client';

import { useT, useLocale } from '@/lib/i18n/react';
import { formatInteger } from '@/lib/format';
import { MetricTile } from '@/components/ui/domain/MetricTile/MetricTile';

interface KpiStripProps {
  totalClicks: number;
  uniqueDealsShared: number;
  totalLinks: number;
  topChannel: string | null;
  avgClicksPerLink: number;
  suspiciousRate: number;
}

export function ShareKpiStrip({
  totalClicks, uniqueDealsShared, totalLinks, topChannel, avgClicksPerLink, suspiciousRate,
}: KpiStripProps) {
  const t = useT('admin_sharing');
  const { locale } = useLocale();
  const tiles = [
    { label: t('kpi_clicks'), value: formatInteger(totalClicks, locale) },
    { label: t('kpi_deals_shared'), value: formatInteger(uniqueDealsShared, locale) },
    { label: t('kpi_links'), value: formatInteger(totalLinks, locale) },
    { label: t('kpi_top_channel'), value: topChannel ? t(`channel_${topChannel}` as never) : '—' },
    { label: t('kpi_avg_clicks_per_link'), value: avgClicksPerLink.toFixed(1) },
    {
      label: t('kpi_suspicious'),
      value: `${suspiciousRate.toFixed(1)}%`,
      tone: suspiciousRate > 5 ? ('warning' as const) : ('default' as const),
    },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      {tiles.map((tile) => (
        <MetricTile key={tile.label} label={tile.label} value={tile.value} tone={'tone' in tile ? tile.tone : 'default'} />
      ))}
    </div>
  );
}