import { MetricTile } from '@/components/ui/domain/MetricTile';
import { formatAgorotLocale } from '@/lib/money';
import { Card, SectionTitle } from './VendorDetail.shared';
import type { Locale } from '@/lib/i18n';
import type { VendorDetailLtvData } from './VendorDetail.types';

interface VendorDetailLtvSectionProps {
  ltv: VendorDetailLtvData;
  locale: Locale;
  loading: boolean;
  t: (key: string) => string;
}

export function VendorDetailLtvSection({ ltv, locale, loading, t }: VendorDetailLtvSectionProps) {
  return (
    <Card>
      <SectionTitle>{t('ltv_section_title')}</SectionTitle>
      <div
        className="grid grid-cols-2 gap-4 sm:grid-cols-3"
        data-ltv-platform-net-agorot={ltv.platformNetAgorot}
        data-ltv-gmv-agorot={ltv.gmvAgorot}
        data-ltv-order-count={ltv.orderCount}
      >
        <MetricTile
          className="col-span-2 sm:col-span-1"
          label={t('ltv_platform_margin')}
          labelTooltip={t('ltv_platform_margin_tooltip')}
          value={formatAgorotLocale(ltv.platformNetAgorot, locale)}
          loading={loading}
        />
        <MetricTile
          label={t('ltv_gmv')}
          labelTooltip={t('ltv_gmv_tooltip')}
          value={
            <span className="text-lg leading-tight font-semibold">
              {formatAgorotLocale(ltv.gmvAgorot, locale)}
            </span>
          }
          loading={loading}
        />
        <MetricTile label={t('ltv_order_count')} value={ltv.orderCount} loading={loading} />
      </div>
    </Card>
  );
}