import type { ContentLinkMetricsResult } from '~/src/lib/songwhipApi/analytics/types';

import { useI18n } from '~/src/lib/i18n';
import { Tab, Tabs } from '~/src/ui/components/tabs';
import { CitiesTable } from './CitiesTable';
import { CountriesTable } from './CountriesTable';

export const LocationBreakdown = ({
  metrics,
}: {
  metrics: ContentLinkMetricsResult | undefined;
}) => {
  const { t } = useI18n();

  return (
    <Tabs testId="contentLinkLocationBreakdown" defaultTabId="countries">
      <Tab id="countries" label={t('dashboard.labels.countries')}>
        <CountriesTable data={metrics?.byCountry ?? []} />
      </Tab>
      <Tab id="cities" label={t('dashboard.labels.cities')}>
        <CitiesTable data={metrics?.byCity ?? []} />
      </Tab>
    </Tabs>
  );
};