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

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

  // Define all available applications
  const allAvailableApplications = [
    {
      label: 'Demo App',
      icon: IconDashboard,
      path: '/app/demo',
    },
    {
      label: 'Key Management',
      icon: IconKey,
      path: '/app/kms',
    },
  ];

  // Define which apps are favorited (you could make this dynamic later)
  const favoritePaths = ['/app/demo'];

  const favoriteApplications = allAvailableApplications.filter(app => 
    favoritePaths.includes(app.path)
  );

  const nonFavoriteApplications = allAvailableApplications.filter(app => 
    !favoritePaths.includes(app.path)
  );

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

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

export default Navigation;