import { View, StyleSheet } from 'react-native'

export default function BasicViewExample() {
    return (
        <View style={styles.container}>
            <View style={styles.box} />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        padding: 20,
    },
    box: {
        width: 100,
        height: 100,
        backgroundColor: '#4361ee',
        borderRadius: 12,
    },
})

import { View, Text, StyleSheet } from 'react-native'

export default function BasicTextExample() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Заголовок</Text>
            <Text style={styles.body}>
                Це звичайний текст. У React Native немає семантичних тегів як <code>&lt;h1&gt;</code>,{' '}
                <code>&lt;p&gt;</code>, <code>&lt;span&gt;</code> — є лише <code>&lt;Text&gt;</code>.
                Стилі визначають, як текст виглядає.
            </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 20,
    },
    title: {
        fontSize: 24,
        fontWeight: '700',
        color: '#1a1a2e',
        marginBottom: 12,
    },
    body: {
        fontSize: 16,
        color: '#4a4a4a',
        lineHeight: 24,
    },
})

import { Text, StyleSheet } from 'react-native'

export default function NestedTextExample() {
    return (
        <Text style={styles.paragraph}>
            Це звичайний текст. <Text style={styles.bold}>Цей фрагмент жирний.</Text>{' '}
            <Text style={styles.colored}>Цей — кольоровий.</Text> А це знову звичайний.
        </Text>
    )
}

const styles = StyleSheet.create({
    paragraph: {
        fontSize: 16,
        color: '#333333',
        lineHeight: 24,
    },
    bold: {
        fontWeight: '700',
        // fontSize та color успадковуються від paragraph
    },
    colored: {
        color: '#4361ee',
        // fontSize успадковується
    },
})

import { View, Text, StyleSheet } from 'react-native'

export default function VerticalStack() {
    return (
        <View style={styles.container}>
            <View style={styles.box}>
                <Text>Елемент 1</Text>
            </View>
            <View style={styles.box}>
                <Text>Елемент 2</Text>
            </View>
            <View style={styles.box}>
                <Text>Елемент 3</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 20,
        // flexDirection: 'column' — за замовчуванням, можна не писати
    },
    box: {
        backgroundColor: '#e0e0e0',
        padding: 16,
        marginBottom: 12,
        borderRadius: 8,
    },
})

import { View, Text, StyleSheet } from 'react-native'

export default function HorizontalRow() {
    return (
        <View style={styles.row}>
            <View style={styles.item}>
                <Text>1</Text>
            </View>
            <View style={styles.item}>
                <Text>2</Text>
            </View>
            <View style={styles.item}>
                <Text>3</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        padding: 20,
        justifyContent: 'space-between', // рівномірний розподіл
    },
    item: {
        width: 80,
        height: 80,
        backgroundColor: '#4361ee',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 8,
    },
})

import { View, Text, StyleSheet } from 'react-native'

export default function CenteredContent() {
    return (
        <View style={styles.container}>
            <View style={styles.card}>
                <Text style={styles.text}>Я відцентрований</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1, // займає всю доступну висоту
        justifyContent: 'center', // вертикальне центрування
        alignItems: 'center', // горизонтальне центрування
        backgroundColor: '#f5f5f5',
    },
    card: {
        width: 200,
        padding: 24,
        backgroundColor: '#ffffff',
        borderRadius: 12,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    text: {
        fontSize: 16,
        textAlign: 'center',
        color: '#333',
    },
})

import { View, Text, StyleSheet, ScrollView } from 'react-native'

export default function ScreenLayout() {
    return (
        <View style={styles.screen}>
            {/* Header */}
            <View style={styles.header}>
                <Text style={styles.headerText}>Заголовок</Text>
            </View>

            {/* Content (прокручується) */}
            <ScrollView style={styles.content}>
                <Text style={styles.paragraph}>
                    Це контент, який може бути довгим і прокручуватись. Lorem ipsum dolor sit amet...
                </Text>
                {/* Багато контенту */}
            </ScrollView>

            {/* Footer */}
            <View style={styles.footer}>
                <Text style={styles.footerText}>Футер</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    screen: {
        flex: 1, // займає весь екран
    },
    header: {
        height: 60,
        backgroundColor: '#4361ee',
        justifyContent: 'center',
        alignItems: 'center',
    },
    headerText: {
        color: '#ffffff',
        fontSize: 18,
        fontWeight: '600',
    },
    content: {
        flex: 1, // займає весь простір між header та footer
        backgroundColor: '#ffffff',
    },
    paragraph: {
        padding: 20,
        fontSize: 16,
        lineHeight: 24,
    },
    footer: {
        height: 50,
        backgroundColor: '#f0f0f0',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
    },
    footerText: {
        fontSize: 14,
        color: '#666',
    },
})