import React from 'react';
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useColorScheme } from 'react-native';

type TabConfig = {
  name: string;
  icon: keyof typeof Ionicons.glyphMap;
  title?: string;
};

export const CustomTabs = ({ routes }: { routes: TabConfig[] }) => {
  const theme = useColorScheme();

  return (
    <Tabs
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarIcon: ({ color, size }) => {
          const iconName =
            routes.find((r) => r.name === route.name)?.icon || 'apps';
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: theme === 'dark' ? 'blue' : 'black',
      })}
    >
      {routes.map((route) => (
        <Tabs.Screen
          name={route.name}
          options={{ title: route.title ?? route.name }}
        />
      ))}
    </Tabs>
  );
};