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

export const ContentLinkHeader = ({
  contentLink,
}: {
  contentLink: MappedContentLink;
}) => {
  const { image, name, artists, customLink } = contentLink;

  const artistName = artists?.[0]?.name || '';
  const url = `${customLink.domain}${customLink.path}`;

  return (
    <Container gap="6" align="center" size="medium">
      <Artwork image={image} name={name} size="medium" />
      <Layout column gap="5" justify="center" width="100%">
        <Layout column gap="1">
          <Text variant="body-small" color="secondary" align="center">
            {artistName}
          </Text>
          <Text variant="title-3" align="center" truncate>
            {name}
          </Text>
        </Layout>
        <Text variant="body" color="secondary" align="center" truncate>
          {url}
        </Text>
      </Layout>
    </Container>
  );
};