"use client";

import React from 'react';
import { BookOpen, Tag, Trash2 } from 'lucide-react';
import { PaneLayout } from '@/app/carnet/page';

interface NavigationProps {
  onLayoutChange?: (layout: PaneLayout) => void;
}

export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-border">
        <h2 className="text-menu-item font-medium text-text">Navigation</h2>
      </div>

      {/* Navigation Items */}
      <div className="flex-1 overflow-y-auto">
        <div 
          className="flex items-center p-3 hover:bg-contrast cursor-pointer"
          onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
        >
          <BookOpen className="w-5 h-5 mr-3 text-passive-1" />
          <h3 className="text-menu-item font-medium text-text">All Notes</h3>
        </div>
        
        <div 
          className="flex items-center p-3 hover:bg-contrast cursor-pointer"
          onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
        >
          <Tag className="w-5 h-5 mr-3 text-passive-1" />
          <h3 className="text-menu-item font-medium text-text">Tags</h3>
        </div>
        
        <div 
          className="flex items-center p-3 hover:bg-contrast cursor-pointer"
          onClick={() => onLayoutChange?.(PaneLayout.TableView)}
        >
          <Trash2 className="w-5 h-5 mr-3 text-passive-1" />
          <h3 className="text-menu-item font-medium text-text">Trash</h3>
        </div>
      </div>
    </div>
  );
};