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

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

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

  return (
    <Tabs testId="contentLinkSourceBreakdown" defaultTabId="channels">
      <Tab id="channels" label={t('dashboard.labels.channels')}>
        <ChannelsTable data={metrics?.byChannelCode ?? []} />
      </Tab>
      <Tab id="referrers" label={t('dashboard.labels.referrers')}>
        <ReferrerTable data={metrics?.byReferrer ?? []} />
      </Tab>
    </Tabs>
  );
};