import { Tabs } from 'expo-router';
import { Home, Coffee, User } from 'lucide-react-native';
import { StyleSheet } from 'react-native';

export default function UserLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopWidth: 1,
          borderTopColor: '#eee',
          height: 60,
        },
        tabBarActiveTintColor: '#B07B4F',
        tabBarInactiveTintColor: '#666',
      }}
    >
      <Tabs.Screen
        name="UserHomeScreen"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
        }}
      />
      

      <Tabs.Screen
        name="CartScreen"
        options={{
          title: 'Cart',
          tabBarIcon: ({ color, size }) => <Coffee size={size} color={color} />,
        }}
      />
      <Tabs.Screen
        name="ProfileScreen"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => <User size={size} color={color} />,
        }}
      />
        <Tabs.Screen
        name="GrainsScreen"
        options={{
          href: null,
        }}
      />
      <Tabs.Screen
        name="ProductDetailsScreen"
        options={{
          href: null,
        }}
      />

    </Tabs>
  );
}

const styles = StyleSheet.create({
  shoppingButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#B07B4F',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 30, // Pushes it upwards to float
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
    elevation: 6,
  },
  floatingWrapper: {
    top: -20, // This helps it float halfway above navbar
    alignItems: 'center',
    justifyContent: 'center',
  },
  shoppingText: {
    fontSize: 24,
    color: '#fff',
  },
});