import React from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'
import { Routes, Route, useLocation } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function NavItem({ to, label }: { to: string; label: string }) {
  const loc = useLocation()
  const active = loc.pathname === to
  return (
    <Pressable style={[styles.navBtn, active && styles.navBtnActive]}>
      <Text style={[styles.navText, active && styles.navTextActive]}>{label}</Text>
    </Pressable>
  )
}

export default function App(): JSX.Element {
  return (
    <View style={styles.shell}>
      <View style={styles.nav}>
        <Text style={styles.logo}>⚡ mixone</Text>
        <NavItem to="/" label="Overview" />
        <NavItem to="/about" label="About & Packaging" />
      </View>
      <View style={styles.main}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  shell: { flex: 1, backgroundColor: '#0f172a' },
  nav: { flexDirection: 'row', alignItems: 'center', gap: 4, paddingVertical: 12, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#334155', backgroundColor: '#1e293b' },
  logo: { fontSize: 18, fontWeight: '700', color: '#38bdf8', marginRight: 20 },
  navBtn: { paddingVertical: 6, paddingHorizontal: 14, borderRadius: 8 },
  navBtnActive: { backgroundColor: 'rgba(56,189,248,0.1)' },
  navText: { fontSize: 13, color: '#94a3b8', textDecorationLine: 'none' },
  navTextActive: { color: '#38bdf8' },
  main: { flex: 1 }
})