/* eslint-disable @typescript-eslint/no-explicit-any */

import React from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { withTheme } from '../../../branding';
import type { ThemeProps } from '../../../branding/hoc/types';
import type { Styles } from './styles';
import themedStyles from './styles';
import { shadows } from '../../../styles';
import SocialPlatformIcon from '../../../components/Icons/SocialPlatformIcon';
import { TWITTER, INSTAGRAM } from '../../../constants/social-platforms';
import WalkthroughUserIcon from '../../../components/Icons/WalkthroughUserIcon';
import FacebookIcon from './FacebookIcon';

export const FindFavoritePage = ({ theme, colors }: ThemeProps) => {
    const styles = (themedStyles as any)[theme] as Styles;
    return (
        <View style={styles.container}>
            <View style={[shadows.walkthroughShadow, styles.userCircle]}>
                <LinearGradient
                    style={styles.userCircleGradient}
                    colors={[
                        colors.walkthroughTileGradientStart,
                        colors.walkthroughTileGradientEnd
                    ]}
                    locations={[0, 1]}
                    useAngle={true}
                    angle={135}
                >
                    <WalkthroughUserIcon size={98} />
                </LinearGradient>
            </View>
            <View style={[shadows.walkthroughShadow, styles.instagramCircle]}>
                <SocialPlatformIcon
                    platform={INSTAGRAM}
                    fontPrimary={true}
                    width={41}
                    height={41}
                    style={undefined}
                />
            </View>
            <View style={[shadows.walkthroughShadow, styles.twitterCircle]}>
                <SocialPlatformIcon
                    platform={TWITTER}
                    fontPrimary={true}
                    width={36}
                    height={36}
                    style={undefined}
                />
            </View>
            <View style={[shadows.walkthroughShadow, styles.facebookCircle]}>
                <FacebookIcon />
            </View>
        </View>
    );
};

export default withTheme(FindFavoritePage);