import AndroidLogo from '@/assets/icons/svg/android.svg';
import AppleLogo from '@/assets/icons/svg/apple.svg';
import MemoIP from '@/assets/icons/svg/memo-ip.svg';
import { LinearGradient } from 'expo-linear-gradient';
import { useTranslation } from 'react-i18next';
import { Linking, Text, TouchableOpacity, View } from 'react-native';

interface PCDownloadProps {
    IOS_APP_STORE_URL: string,
    ANDROID_APK_URL: string
}
const PCDownload = (props: PCDownloadProps) => {
    const { IOS_APP_STORE_URL, ANDROID_APK_URL } = props

    const handleIOSDownload = () => {
        Linking.openURL(IOS_APP_STORE_URL);
    };

    const handleAndroidDownload = () => {
        Linking.openURL(ANDROID_APK_URL);
    };

    const { t } = useTranslation();
    return (
        <LinearGradient
            colors={['#FFB645', '#E2793F']}
            className="flex-1 items-center justify-center p-6"
        >
            <View className="absolute top-0 left-0 w-full h-full">
                <MemoIP width="100%" height="100%" style={{ opacity: 0.1 }} />
            </View>
            <View className="items-center mb-12">
                <Text className="text-white text-5xl font-extrabold tracking-tight">
                    MemoWake
                </Text>
                <Text className="text-white/90 text-lg mt-4 text-center max-w-xs">
                    {t('desc', { ns: 'download' })}
                </Text>
            </View>

            <View className="w-full max-w-xs">
                <TouchableOpacity
                    className="bg-white/90 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg mb-5"
                    onPress={handleIOSDownload}
                    activeOpacity={0.8}
                >
                    <AppleLogo width={24} height={24} fill="black" />
                    <Text className="text-black font-bold text-lg ml-3">
                        {t('ios', { ns: 'download' })}
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity
                    className="bg-black/80 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg"
                    onPress={handleAndroidDownload}
                    activeOpacity={0.8}
                >
                    <AndroidLogo width={24} height={24} fill="#3DDC84" />
                    <Text className="text-white font-bold text-lg ml-3">
                        {t('android', { ns: 'download' })}
                    </Text>
                </TouchableOpacity>
            </View>
        </LinearGradient>
    )
}


export default PCDownload