'use client';

import { Button } from '@/components/ui/Button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/DropdownMenu';
import { LoginButton } from './LoginButton';

export interface UserMenuProps {}

export function LoginMenu() {
  return (
    <div className="flex items-center justify-between">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost">Sign in</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent sideOffset={8} align="end" className="w-[220px]">
          <DropdownMenuItem className="flex-col items-center">
            <LoginButton oauth="google" />
          </DropdownMenuItem>
          <DropdownMenuItem className="flex-col items-center">
            <LoginButton oauth="github" />
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}