import { memo } from 'react';

import type { MappedContentLink } from '~/lib/songwhipApi/mapper';
import type { ReactNode } from 'react';

import { CatalogItem } from '../../components';

export const ContentLinkItem = memo(
  ({
    testId,
    item,
    renderActions,
  }: {
    testId?: string;
    item: MappedContentLink;
    renderActions(): ReactNode;
  }) => {
    const { customLink } = item;
    const link = `${customLink.domain}${customLink.path}`;
    const { href } = new URL(`/content-links/${item.id}`, location.origin);

    return (
      <CatalogItem
        testId={testId}
        title={item.name}
        href={href}
        subtitle={link}
        image={item.image}
        squareImage
        renderAfterOuter={() => renderActions()}
        inNewTab
      />
    );
  }
);