project-switcher.tsx

import { useAuthStore } from '@/stores/authStore';
import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-react';
import { toast } from 'sonner';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { Project } from '@/types/project';

export function ProjectSwitcher() {
  const { projects, selectedProject, setSelectedProject } = useAuthStore();

  const handleSelectProject = async (project: Project) => {
    try {
      await setSelectedProject(project);
    } catch (error) {
      console.error(error);
      toast.error('프로젝트 권한을 조회할 수 없습니다.');
    }
  };

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <GalleryVerticalEnd className="size-4" />
              </div>
              <div className="flex flex-col gap-0.5 leading-none">
                {selectedProject ? (
                  <>
                    <span className="font-semibold">Project</span>
                    <span>
                      {selectedProject.name} ({selectedProject.role})
                    </span>
                  </>
                ) : (
                  <span className="text-muted-foreground">프로젝트를 선택해주세요</span>
                )}
              </div>
              <ChevronsUpDown className="ml-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]" align="start">
            {projects.map((project) => (
              <DropdownMenuItem key={project.id} onSelect={() => handleSelectProject(project)}>
                {project.name} {project.id === selectedProject?.id && <Check className="ml-auto" />}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}