import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { styles } from '../styles/BottontabStyle';
import { COLORS } from '../constants/color';

export default function BottomTabBar() {
  return (
    <View style={styles.container}>

      {/* Home */}
      <TouchableOpacity style={styles.tab}>
        <Ionicons name="home" size={22} color={COLORS.tabActive} />
        <Text style={[styles.label, { color: COLORS.tabActive }]}>
          Home
        </Text>
      </TouchableOpacity>

      {/* Assets */}
      <TouchableOpacity style={styles.tab}>
        <Ionicons name="cube-outline" size={22} color={COLORS.tabInactive} />
        <Text style={styles.label}>
          Assets
        </Text>
      </TouchableOpacity>

      {/* Scan Button */}
      <View style={styles.scanContainer}>
        <TouchableOpacity style={styles.scanButton}>
          <Ionicons name="scan" size={28} color="#000" />
        </TouchableOpacity>

        <Text style={[styles.label, { color: COLORS.tabActive }]}>
          Scan
        </Text>
      </View>

      {/* Alarms */}
      <TouchableOpacity style={styles.tab}>
        <Ionicons
          name="notifications-outline"
          size={22}
          color={COLORS.tabInactive}
        />
        <Text style={styles.label}>
          Alarms
        </Text>
      </TouchableOpacity>

      {/* More */}
      <TouchableOpacity style={styles.tab}>
        <Ionicons
          name="ellipsis-horizontal"
          size={22}
          color={COLORS.tabInactive}
        />
        <Text style={styles.label}>
          More
        </Text>
      </TouchableOpacity>

    </View>
  );
}