import React from 'react';
import { NavLink, Stack, Text, Group } from '@mantine/core';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  IconHome,
  IconApps,
  IconDashboard,
  IconChartLine,
  IconStar,
  IconKey,
} from '@tabler/icons-react';

const Navigation: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const navigationItems = [
    {
      label: 'Home',
      icon: IconHome,
      path: '/',
    },
    {
      label: 'Favorites',
      icon: IconStar,
      path: '/favorites',
    },
    {
      label: 'All Applications',
      icon: IconApps,
      path: '/apps',
    },
  ];

  const applications = [
    {
      label: 'Demo App',
      icon: IconDashboard,
      path: '/app/demo',
    },
    {
      label: 'Key Management',
      icon: IconKey,
      path: '/app/kms',
    },
    {
      label: 'Analytics',
      icon: IconChartLine,
      path: '/app/analytics',
    },
  ];

  return (
    <Stack gap="xs" p="md">
      <Text size="sm" fw={600} c="dimmed" tt="uppercase" mb="xs">
        Navigation
      </Text>
      
      {navigationItems.map((item) => (
        <NavLink
          key={item.path}
          label={item.label}
          leftSection={<item.icon size={16} />}
          active={location.pathname === item.path}
          onClick={() => navigate(item.path)}
        />
      ))}

      <Text size="sm" fw={600} c="dimmed" tt="uppercase" mt="lg" mb="xs">
        Applications
      </Text>
      
      {applications.map((app) => (
        <NavLink
          key={app.path}
          label={app.label}
          leftSection={<app.icon size={16} />}
          active={location.pathname.startsWith(app.path)}
          onClick={() => navigate(app.path)}
        />
      ))}
    </Stack>
  );
};

export default Navigation;