import { Link, usePathname } from 'expo-router';
import { ScrollView, StyleSheet, Text } from 'react-native';
import { getCustomerTheme, useCustomerTheme } from '../src/store/theme';

const routes = [
  { href: '/', label: 'Home' },
  { href: '/search', label: 'Busca' },
  { href: '/restaurant', label: 'Loja' },
  { href: '/product', label: 'Produto' },
  { href: '/cart', label: 'Carrinho' },
  { href: '/checkout', label: 'Checkout' },
  { href: '/payment', label: 'Pagamento' },
  { href: '/orders', label: 'Pedidos' },
  { href: '/order-tracking', label: 'Rastreio' },
  { href: '/favorites', label: 'Favoritos' },
  { href: '/addresses', label: 'Enderecos' },
  { href: '/profile', label: 'Perfil' },
  { href: '/signup', label: 'Cadastro' },
];

export function CustomerFlowNav() {
  const pathname = usePathname();
  const { mode } = useCustomerTheme();
  const theme = getCustomerTheme(mode);

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.content}
      style={styles.container}
    >
      {routes.map((route) => {
        const active = pathname === route.href;

        return (
          <Link
            key={route.href}
            href={route.href as never}
            style={[styles.link, { backgroundColor: active ? theme.accent : theme.surface }]}
          >
            <Text style={[styles.linkText, { color: active ? theme.accentText : theme.textMuted }]}>{route.label}</Text>
          </Link>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 4,
  },
  content: {
    gap: 10,
    paddingBottom: 4,
  },
  link: {
    borderRadius: 999,
    paddingHorizontal: 14,
    paddingVertical: 10,
  },
  linkText: {
    fontSize: 12,
    fontWeight: '800',
    textTransform: 'uppercase',
    letterSpacing: 0.8,
  },
});