import Link from 'next/link';

import { MappedContentLink } from '~/lib/songwhipApi/mapper';
import { useI18n } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import { Artwork } from '~/src/ui/primitives/artwork';
import { Text } from '~/src/ui/primitives/text';

export const ContentLinkItem = ({
  item,
  pageViews,
}: {
  item: MappedContentLink;
  pageViews: number;
}) => {
  const { t } = useI18n('dashboard');

  return (
    <Link href={`/dashboard/content-link/${item.id}`}>
      <Layout paddingY="4" gap="4" align="center">
        <Artwork image={item.image} size="small" />
        <Layout
          gap="4"
          align="center"
          overflow="hidden"
          justify="space-between"
          minWidth={0}
        >
          <Layout overflow="hidden" minWidth={0}>
            <Text truncate>{item.name}</Text>
          </Layout>
          <Layout shrink>
            <Text variant="body-small" color="secondary" noWrap>
              {t('visits', { count: pageViews })}
            </Text>
          </Layout>
        </Layout>
      </Layout>
    </Link>
  );
};