gbclient/src/mail/components/account-switcher.tsx

import React, { useState } from 'react';

interface Account {
  email: string;
  label: string;
  icon: React.ReactNode;
}

interface AccountSwitcherProps {
  isCollapsed: boolean;
  accounts: Account[];
}

export function AccountSwitcher({ isCollapsed, accounts }: AccountSwitcherProps) {
  const [selectedAccount, setSelectedAccount] = useState<string>(accounts[0].email);
  const [isOpen, setIsOpen] = useState(false);

  const selectedAccountData = accounts.find((account) => account.email === selectedAccount);

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`flex items-center ${isCollapsed ? 'justify-center' : 'space-x-2'}`}
      >
        {selectedAccountData && (
          <>
            <div className="w-6 h-6 flex items-center justify-center">
              {selectedAccountData.icon}
            </div>
            {!isCollapsed && (
              <span>{selectedAccountData.label}</span>
            )}
          </>
        )}
      </button>

      {isOpen && (
        <div className="absolute z-10 mt-2 w-56 bg-white rounded-md shadow-lg">
          <div className="p-2">
            {accounts.map((account) => (
              <button
                key={account.email}
                onClick={() => {
                  setSelectedAccount(account.email);
                  setIsOpen(false);
                }}
                className="w-full text-left px-3 py-2 hover:bg-gray-100 flex items-center space-x-2"
              >
                <div className="w-5 h-5 flex items-center justify-center">
                  {account.icon}
                </div>
                <span>{account.label}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}