import React from 'react'
import { View, StyleSheet } from 'react-native'
import GradientText from './GradientText'

/**
 * 渐变文字使用示例
 */
export default function GradientTextExample() {
    return (
        <View style={styles.container}>
            {/* 水平渐变 */}
            <GradientText
                colors={['#FF9966', '#FF6699', '#9966FF']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={styles.text}
            >
                水平渐变文字
            </GradientText>

            {/* 垂直渐变 */}
            <GradientText
                colors={['#9966FF', '#FF6699', '#FF9966']}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.text}
            >
                垂直渐变文字
            </GradientText>

            {/* 对角线渐变 */}
            <GradientText
                colors={['#FF9966', '#FF6699', '#9966FF']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={styles.largeText}
            >
                对角线渐变
            </GradientText>

            {/* 两色渐变 */}
            <GradientText
                colors={['#FF6699', '#9966FF']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={styles.boldText}
            >
                两色渐变
            </GradientText>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
        gap: 30,
    },
    text: {
        fontSize: 24,
        fontWeight: '600',
    },
    largeText: {
        fontSize: 32,
        fontWeight: 'bold',
    },
    boldText: {
        fontSize: 28,
        fontWeight: 'bold',
    },
})