breakpilot-lehrer/website/app/mail/_components/MailSidebar.tsx

'use client'

import type { Account, Folder } from './types'
import { FOLDER_LABELS } from './types'

interface MailSidebarProps {
  folders: Folder[]
  accounts: Account[]
  selectedFolder: string
  setSelectedFolder: (folder: string) => void
  selectedAccount: string
  setSelectedAccount: (account: string) => void
  totalUnread: number
}

export default function MailSidebar({
  folders,
  accounts,
  selectedFolder,
  setSelectedFolder,
  selectedAccount,
  setSelectedAccount,
  totalUnread,
}: MailSidebarProps) {
  return (
    <aside className="w-64 bg-white border-r border-slate-200 flex flex-col">
      {/* Folders */}
      <nav className="p-4 space-y-1">
        {folders.map((folder) => (
          <button
            key={folder.name}
            onClick={() => setSelectedFolder(folder.name)}
            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${
              selectedFolder === folder.name
                ? 'bg-primary-50 text-primary-700'
                : 'text-slate-600 hover:bg-slate-50'
            }`}
          >
            {folder.icon}
            <span className="font-medium">{FOLDER_LABELS[folder.name]}</span>
            {folder.count !== undefined && (
              <span className="ml-auto text-sm text-slate-500">{folder.count}</span>
            )}
          </button>
        ))}
      </nav>

      <div className="border-t border-slate-200 my-2"></div>

      {/* Accounts */}
      <div className="p-4">
        <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
          Konten
        </h3>
        <div className="space-y-1">
          <button
            onClick={() => setSelectedAccount('all')}
            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${
              selectedAccount === 'all'
                ? 'bg-primary-50 text-primary-700'
                : 'text-slate-600 hover:bg-slate-50'
            }`}
          >
            <div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
            <span className="font-medium text-sm">Alle Konten</span>
            <span className="ml-auto text-xs text-slate-500">{totalUnread}</span>
          </button>
          {accounts.map((account) => (
            <button
              key={account.id}
              onClick={() => setSelectedAccount(account.id)}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors ${
                selectedAccount === account.id
                  ? 'bg-primary-50 text-primary-700'
                  : 'text-slate-600 hover:bg-slate-50'
              }`}
            >
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span className="font-medium text-sm truncate flex-1">
                {account.displayName || account.email.split('@')[0]}
              </span>
              {account.unreadCount > 0 && (
                <span className="text-xs bg-primary-100 text-primary-700 px-1.5 py-0.5 rounded">
                  {account.unreadCount}
                </span>
              )}
            </button>
          ))}
        </div>
      </div>

      {/* Quick Links */}
      <div className="mt-auto p-4 border-t border-slate-200">
        <a
          href="/mail/tasks"
          className="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-50 rounded-lg"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          <span className="font-medium text-sm">Arbeitsvorrat</span>
        </a>
      </div>
    </aside>
  )
}