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 HomeScreen() {
  const colorScheme = useColorScheme();
  const theme = colorScheme ?? 'light';

  return (
    <ThemedView style={styles.container}>
      <ThemedView style={styles.header}>
        <ThemedText type="title">Your Cameras</ThemedText>
        <ThemedText type="secondary">Manage your indoor security devices</ThemedText>
      </ThemedView>

      <ThemedView
        style={[styles.card, {
          shadowColor: Colors[theme].border,
          borderColor: Colors[theme].border
        }]}
        variant="card"
      >
        <IconSymbol size={48} name="house.fill" color={Colors[theme].icon} />
        <ThemedText type="subtitle" style={styles.cardTitle}>No Cameras Added</ThemedText>
        <ThemedText style={styles.cardDescription} type="secondary">
          Add a camera to start monitoring your home.
        </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,
    // iOS Shadow
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 12,
    // Android Shadow
    elevation: 2,
  },
  cardTitle: {
    marginTop: 16,
    marginBottom: 8,
  },
  cardDescription: {
    textAlign: 'center',
    maxWidth: 240,
  },
});