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

import { ChannelBadge } from '~/src/features/contentLink/components/ChannelBadge';
import { useI18n } from '~/src/lib/i18n';
import { Table } from '~/src/ui/components/table';
import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';
import { createTotalRow } from '../utils';
import { TotalRow } from './TotalsRow';

export const ChannelsTable = ({ data }: { data: ChannelCodeTotal[] }) => {
  const { t } = useI18n();

  const totalsRow = createTotalRow(data, 'channelCode');

  return (
    <Table
      rows={[totalsRow, ...data]}
      getRowKey={(row) => row.channelCode}
      columns={[
        {
          key: 'name',
          header: t('dashboard.labels.channel'),
          renderCell: (row, { rowIndex }) => {
            if (rowIndex === 0) {
              return <TotalRow total={data.length} />;
            }

            return (
              <Layout gap="4" align="center">
                <ChannelBadge channelCode={row.channelCode || '?'} />
                <Text variant="body-small">
                  {row.channelName || t('dashboard.labels.unknown')}
                </Text>
              </Layout>
            );
          },
        },
        {
          key: 'total',
          header: t('dashboard.labels.clicks'),
          align: 'right',
          renderCell: (row) => row.total,
        },
      ]}
    />
  );
};