import type React from 'react';
import { Box, Button, Flex, Heading, Separator, Text } from '@radix-ui/themes';
import type { NavItem } from './types';
import { Home, Globe, ArrowRight, Lock, Settings, User } from 'lucide-react';
import { useLayout } from '../../providers/LayoutProvider';

const navItems: { label: NavItem; icon: React.ReactNode }[] = [
  { label: 'Dashboard', icon: <Home size={16} /> },
  { label: 'Proxy Hosts', icon: <Globe size={16} /> },
  { label: 'Redirection', icon: <ArrowRight size={16} /> },
  { label: 'SSL', icon: <Lock size={16} /> },
  { label: 'Settings', icon: <Settings size={16} /> },
  { label: 'Profile', icon: <User size={16} /> },
] as const;

export function SidebarContent() {
  const { activeTab, setActiveTab, setIsMobileMenuOpen } = useLayout();

  return (
    <Flex direction="column" gap="2" p="4" style={{ height: '100%' }}>
      <Flex align="center" gap="2" mb="6" px="2">
        <Box
          style={{
            width: 32,
            height: 32,
            backgroundColor: 'var(--iris-9)',
            borderRadius: 'var(--radius-2)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontWeight: 'bold',
          }}
        >
          Y
        </Box>
        <Heading size="4" weight="bold">
          YANPM
        </Heading>
      </Flex>

      <Flex direction="column" gap="1">
        {navItems.map((item) => (
          <Button
            key={item.label}
            variant={activeTab === item.label ? 'soft' : 'ghost'}
            color={activeTab === item.label ? 'iris' : 'gray'}
            onClick={() => {
              setActiveTab(item.label);
              setIsMobileMenuOpen(false);
            }}
            style={{ cursor: 'pointer', width: '100%', justifyContent: 'flex-start' }}
          >
            <Flex align="center" gap="3">
              {item.icon}
              <Text size="2" weight={activeTab === item.label ? 'bold' : 'medium'}>
                {item.label}
              </Text>
            </Flex>
          </Button>
        ))}
      </Flex>

      <Box style={{ marginTop: 'auto' }} pt="4">
        <Separator size="4" mb="4" />
        <Flex align="center" gap="3" px="2">
          <Box
            style={{
              width: 32,
              height: 32,
              backgroundColor: 'var(--gray-5)',
              borderRadius: '50%',
            }}
          />
          <Box>
            <Text size="1" weight="bold" as="div">
              Admin User
            </Text>
            <Text size="1" color="gray">
              admin@example.com
            </Text>
          </Box>
        </Flex>
      </Box>
    </Flex>
  );
}

export default SidebarContent;