Bottom Bar

'use client'

import { useState } from 'react'
import { BottomBar, BottomBarItem, View, Text } from 'biibaos'
import { Home, Search, Bell, User } from 'lucide-react'

export default function App() {
  const [activeTab, setActiveTab] = useState('home')

  const items: BottomBarItem[] = [
    { id: 'home', label: 'Home', icon: <Home size={20} strokeWidth={2} />, activeIcon: <Home size={20} strokeWidth={2.5} /> },
    { id: 'search', label: 'Search', icon: <Search size={20} strokeWidth={2} />, activeIcon: <Search size={20} strokeWidth={2.5} /> },
    { id: 'notifications', label: 'Alerts', icon: <Bell size={20} strokeWidth={2} />, activeIcon: <Bell size={20} strokeWidth={2.5} />, badge: <View bg="danger" w={8} h={8} radius="full" /> },
    { id: 'profile', label: 'Profile', icon: <User size={20} strokeWidth={2} />, activeIcon: <User size={20} strokeWidth={2.5} /> }
  ]

  return (
    <View w="100%" h={300} bg="surface-raised" radius="xl" overflow="hidden" border>
      <View p={24} align="center" justify="center" h="100%">
        <Text variant="h2">Selected: {activeTab}</Text>
      </View>
      <BottomBar 
        items={items}
        activeId={activeTab}
        onChange={setActiveTab}
      />
    </View>
  )