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);

  // Triangle icon
  const TriangleIcon = () => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
      <path d="M24 22.525H0l12-21.05 12 21.05z" />
    </svg>
  );

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`flex items-center w-full justify-between rounded-md px-2 py-1.5 hover:bg-gray-100 ${isCollapsed ? 'justify-center' : ''}`}
      >
        <div className="flex items-center gap-2">
          <div className="bg-black rounded-md text-white p-1">
            <TriangleIcon />
          </div>
          {!isCollapsed && (
            <span className="text-sm font-medium">Alicia Koch</span>
          )}
        </div>
        {!isCollapsed && (
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="m6 9 6 6 6-6" />
          </svg>
        )}
      </button>

      {isOpen && (
        <div className="absolute z-10 top-full left-0 mt-1 w-64 rounded-md border shadow-md bg-white">
          <div className="p-1">
            {accounts.map((account) => (
              <button
                key={account.email}
                onClick={() => {
                  setSelectedAccount(account.email);
                  setIsOpen(false);
                }}
                className="w-full text-left px-2 py-1.5 hover:bg-gray-100 rounded-md flex items-center gap-2"
              >
                <div className="w-6 h-6 flex items-center justify-center">
                  {account.icon}
                </div>
                <span className="text-sm">{account.label}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}