import { StyleSheet } from 'react-native';

import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function ClipsScreen() {
    const colorScheme = useColorScheme();
    const theme = colorScheme ?? 'light';

    return (
        <ThemedView style={styles.container}>
            <ThemedView style={styles.header}>
                <ThemedText type="title">Clips</ThemedText>
                <ThemedText type="secondary">Recorded footage</ThemedText>
            </ThemedView>

            <ThemedView
                style={[styles.card, {
                    shadowColor: Colors[theme].border,
                    borderColor: Colors[theme].border
                }]}
                variant="card"
            >
                <IconSymbol size={48} name="film.fill" color={Colors[theme].icon} />
                <ThemedText type="subtitle" style={styles.cardTitle}>No Clips Available</ThemedText>
                <ThemedText style={styles.cardDescription} type="secondary">
                    Recorded clips will appear here.
                </ThemedText>
            </ThemedView>
        </ThemedView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        paddingTop: 80,
    },
    header: {
        marginBottom: 32,
    },
    card: {
        padding: 32,
        borderRadius: 16,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.1,
        shadowRadius: 12,
        elevation: 2,
    },
    cardTitle: {
        marginTop: 16,
        marginBottom: 8,
    },
    cardDescription: {
        textAlign: 'center',
        maxWidth: 240,
    },
});
