import { AppBskyFeedDefs } from '@atproto/api';
import { Avatar, Card, Group, Stack, Text } from '@mantine/core';
import type { EmbedMode } from '../../types';
import { getFeedLink } from '../../lib/utils/link';

interface Props {
  feed: AppBskyFeedDefs.GeneratorView;
  mode?: EmbedMode;
}

export default function FeedEmbed(props: Props) {
  if (props.mode === 'card') {
    return (
      <Card p={'xs'} withBorder>
        <Group gap={'xs'} wrap="nowrap">
          {props.feed.avatar && (
            <Avatar src={props.feed.avatar} alt={props.feed.displayName} />
          )}

          <Stack gap={0}>
            <Text fz={'sm'} fw={500} c={'bright'} lineClamp={1}>
              {props.feed.displayName}
            </Text>
            <Text fz={'sm'} fw={500} c={'gray'} lineClamp={1} span>
              Feed by @{props.feed.creator.handle}
            </Text>
          </Stack>
        </Group>
      </Card>
    );
  }

  return (
    <Card
      p={'xs'}
      component="a"
      href={getFeedLink(props.feed)}
      target="_blank"
      withBorder
    >
      <Group gap={'xs'} wrap="nowrap">
        {props.feed.avatar && (
          <Avatar src={props.feed.avatar} alt={props.feed.displayName} />
        )}

        <Stack gap={0}>
          <Text fz={'sm'} fw={500} c={'bright'} lineClamp={1}>
            {props.feed.displayName}
          </Text>
          <Text fz={'sm'} fw={500} c={'gray'} lineClamp={1} span>
            Feed by @{props.feed.creator.handle}
          </Text>
        </Stack>
      </Group>
    </Card>
  );
}
