import React, { useState } from 'react';

const groups = [
  {
    label: "Personal Account",
    teams: [
      { label: "Alicia Koch", value: "personal" },
    ],
  },
  {
    label: "Teams",
    teams: [
      { label: "Acme Inc.", value: "acme-inc" },
      { label: "Monsters Inc.", value: "monsters" },
    ],
  },
];

export function TeamSwitcher() {
  const [open, setOpen] = useState(false);
  const [showNewTeamDialog, setShowNewTeamDialog] = useState(false);
  const [selectedTeam, setSelectedTeam] = useState(groups[0].teams[0]);

  return (
    <div className="relative">
      <button 
        onClick={() => setOpen(true)}
        className="flex items-center space-x-2"
      >
        <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
          {selectedTeam.label[0]}
        </div>
        <span>{selectedTeam.label}</span>
      </button>

      {open && (
        <div className="absolute z-10 mt-2 w-56 bg-white rounded-md shadow-lg">
          <div className="p-2">
            <input 
              type="text" 
              placeholder="Search team..." 
              className="w-full p-2 border rounded"
            />
          </div>
          {groups.map((group) => (
            <div key={group.label} className="py-1">
              <p className="px-3 py-1 text-sm font-medium text-gray-500">{group.label}</p>
              {group.teams.map((team) => (
                <button
                  key={team.value}
                  onClick={() => {
                    setSelectedTeam(team);
                    setOpen(false);
                  }}
                  className="w-full text-left px-3 py-2 hover:bg-gray-100"
                >
                  {team.label}
                </button>
              ))}
            </div>
          ))}
          <div className="border-t p-2">
            <button 
              onClick={() => {
                setOpen(false);
                setShowNewTeamDialog(true);
              }}
              className="w-full p-2 text-left hover:bg-gray-100"
            >
              Create Team
            </button>
          </div>
        </div>
      )}

      {showNewTeamDialog && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div className="bg-white p-4 rounded-md">
            <h3 className="text-lg font-medium mb-4">Create team</h3>
            <input 
              type="text" 
              placeholder="Team name" 
              className="w-full p-2 border rounded mb-4"
            />
            <div className="flex justify-end space-x-2">
              <button 
                onClick={() => setShowNewTeamDialog(false)}
                className="px-4 py-2 border rounded"
              >
                Cancel
              </button>
              <button 
                onClick={() => setShowNewTeamDialog(false)}
                className="px-4 py-2 bg-blue-500 text-white rounded"
              >
                Create
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}