import { cn } from '@/utils/utils';
import React, { memo } from 'react';
import { Linking, ScrollView, TouchableOpacity, View } from 'react-native';
import { ChannelCard } from './ChannelCard';
import { PostCard } from './PostCard';
import { ProfileCard } from './ProfileCard';

type Post = {
  text: string;
  author: {
    username: string;
    displayName: string;
    pfp: string;
    id: string;
  };
  platform: string;
  url?: string;
  photo?: string;
};

type Profile = {
  id: string | number;
  username: string;
  displayName?: string;
  pfp?: string;
  url?: string;
  platform: string;
};

type Channel = {
  name: string;
  description?: string;
  image_url?: string;
};

type ActionParams = {
  post?: Post & { url?: string };
  profile?: Profile;
  profile_url?: string;
  channel?: Channel;
  channel_url: string;
};

interface EmbeddedContentProps {
  actionParams?: ActionParams;
  platform: string;
  withoutLink?: boolean;
  withoutZIndex?: boolean;
  className?: string;
}

export const EmbeddedContent = memo(
  ({
    actionParams,
    platform,
    withoutLink = false,
    withoutZIndex = false,
    className,
  }: EmbeddedContentProps) => {
    if (
      !actionParams?.post &&
      !actionParams?.profile &&
      !actionParams?.channel
    ) {
      return null;
    }

    const openLink = (url: string) => {
      if (url) Linking.openURL(url);
    };

    return (
      <View
        className={cn('gap-3 max-h-60 rounded-xl overflow-hidden', className)}
      >
        <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false}>
          {/* Post */}
          {actionParams.post &&
            (withoutLink ? (
              <PostCard
                post={actionParams.post}
                withoutZIndex={withoutZIndex}
              />
            ) : (
              <TouchableOpacity
                activeOpacity={0.85}
                onPress={() => openLink(actionParams.post?.url ?? '')}
              >
                <PostCard post={actionParams.post} />
              </TouchableOpacity>
            ))}

          {/* Profile */}
          {actionParams.profile &&
            (withoutLink ? (
              <ProfileCard profile={actionParams.profile} platform={platform} />
            ) : (
              <TouchableOpacity
                activeOpacity={0.85}
                onPress={() => openLink(actionParams.profile_url ?? '')}
              >
                <ProfileCard
                  profile={actionParams.profile}
                  platform={platform}
                />
              </TouchableOpacity>
            ))}

          {/* Channel */}
          {actionParams.channel &&
            (withoutLink ? (
              <ChannelCard
                channel={actionParams.channel}
                channelUrl={actionParams.channel_url}
                platform={platform}
              />
            ) : (
              <TouchableOpacity
                activeOpacity={0.85}
                onPress={() => openLink(actionParams.channel_url ?? '')}
              >
                <ChannelCard
                  channel={actionParams.channel}
                  channelUrl={actionParams.channel_url}
                  platform={platform}
                />
              </TouchableOpacity>
            ))}
        </ScrollView>
      </View>
    );
  },
);

EmbeddedContent.displayName = 'EmbeddedContent';

------------------------------------------------------------------------------------------------------------------------


import { Image } from 'expo-image';
import React from 'react';
import { Linking, Text, TouchableOpacity, View } from 'react-native';
import { PlatformIcon } from '../PlatformIcon';

interface Profile {
  id: string | number;
  username: string;
  displayName?: string;
  pfp?: string;
  url?: string;
  platform: string;
}

interface ProfileCardProps {
  profile: Profile;
  platform?: string;
  className?: string;
}

export const ProfileCard = ({
  profile,
  platform,
  className,
}: ProfileCardProps) => {
  const fallbackInitial = (
    profile.displayName?.[0] || profile.username[0]
  ).toUpperCase();

  const _platform = platform || profile.platform;

  const profileUrl =
    profile.url ||
    `https://${_platform === 'x' ? 'x.com' : 'farcaster.xyz'}/${
      profile.username
    }`;

  const openProfile = () => Linking.openURL(profileUrl);

  return (
    <TouchableOpacity
      onPress={openProfile}
      activeOpacity={0.85}
      className={`relative flex-row items-start gap-3 p-3 rounded-lg border border-[#2c2d2e] bg-[#131314] overflow-hidden ${
        className ?? ''
      }`}
    >
      {/* Gradient border hover effect substitute */}
      <View className='absolute inset-0 rounded-lg border border-[#2c2d2e] opacity-0' />

      {/* Avatar */}
      <View className='w-11 h-11 rounded-full border border-[#2c2d2e] bg-[#2c2d2e] items-center justify-center overflow-hidden'>
        {profile.pfp ? (
          <Image
            source={{ uri: profile.pfp }}
            className='w-full h-full rounded-full'
            contentFit='cover'
            priority='high'
          />
        ) : (
          <Text className='text-white text-lg font-semibold'>
            {fallbackInitial}
          </Text>
        )}
      </View>

      {/* Info & platform icon */}
      <View className='flex-1 flex-row items-start justify-between min-w-0'>
        <View className='flex flex-col max-w-[calc(100%-40px)]'>
          <Text numberOfLines={1} className='text-sm font-medium text-primary'>
            {profile.displayName || `@${profile.username}`}
          </Text>
          <Text numberOfLines={1} className='text-xs text-[#454647]'>
            @{profile.username}
          </Text>
        </View>

        <PlatformIcon platform={_platform} size={16} onPress={openProfile} />
      </View>
    </TouchableOpacity>
  );
};