import React from 'react';
import { 
  Inbox, Send, Star, Trash, Folder, 
  AlertOctagon, Archive, Edit 
} from 'lucide-react';
import { Button } from '@/components/ui/button';

interface EmailSidebarContentProps {
  mailboxes: string[];
  currentFolder: string;
  onFolderChange: (folder: string) => void;
}

export default function EmailSidebarContent({
  mailboxes,
  currentFolder,
  onFolderChange
}: EmailSidebarContentProps) {

  // Helper to format folder names
  const formatFolderName = (folder: string) => {
    return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase();
  };

  // Helper to get folder icons
  const getFolderIcon = (folder: string) => {
    const folderLower = folder.toLowerCase();
    
    if (folderLower.includes('inbox')) {
      return <Inbox className="h-4 w-4" />;
    } else if (folderLower.includes('sent')) {
      return <Send className="h-4 w-4" />;
    } else if (folderLower.includes('trash')) {
      return <Trash className="h-4 w-4" />;
    } else if (folderLower.includes('archive')) {
      return <Archive className="h-4 w-4" />;
    } else if (folderLower.includes('draft')) {
      return <Edit className="h-4 w-4" />;
    } else if (folderLower.includes('spam') || folderLower.includes('junk')) {
      return <AlertOctagon className="h-4 w-4" />;
    } else {
      return <Folder className="h-4 w-4" />;
    }
  };

  return (
    <nav className="p-3">
      <ul className="space-y-0.5 px-2">
        {mailboxes.map((folder) => (
          <li key={folder}>
            <Button 
              variant={currentFolder === folder ? 'secondary' : 'ghost'}
              className={`w-full justify-start py-2 ${
                currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
              }`}
              onClick={() => onFolderChange(folder)}
            >
              <div className="flex items-center">
                {getFolderIcon(folder)}
                <span className="ml-2">{formatFolderName(folder)}</span>
              </div>
            </Button>
          </li>
        ))}
      </ul>
    </nav>
  );
}