"use client";

import { signIn, signOut } from "next-auth/react";

export function SignInButton() {
  return (
    <button
      onClick={() => signIn("huggingface", { callbackUrl: "/" })}
      className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-poppins font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
    >
      <svg
        className="w-5 h-5"
        viewBox="0 0 95 88"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M47.21 73.5583C42.6788 73.5583 39 69.8795 39 65.3483V41.5583C39 37.0271 42.6788 33.3483 47.21 33.3483C51.7412 33.3483 55.42 37.0271 55.42 41.5583V65.3483C55.42 69.8795 51.7412 73.5583 47.21 73.5583Z" />
        <path d="M73.42 73.5583C68.8888 73.5583 65.21 69.8795 65.21 65.3483V22.3483C65.21 17.8171 68.8888 14.1383 73.42 14.1383C77.9512 14.1383 81.63 17.8171 81.63 22.3483V65.3483C81.63 69.8795 77.9512 73.5583 73.42 73.5583Z" />
        <path d="M21 73.5583C16.4688 73.5583 12.79 69.8795 12.79 65.3483V22.3483C12.79 17.8171 16.4688 14.1383 21 14.1383C25.5312 14.1383 29.21 17.8171 29.21 22.3483V65.3483C29.21 69.8795 25.5312 73.5583 21 73.5583Z" />
      </svg>
      Sign in with Hugging Face
    </button>
  );
}

export function SignOutButton() {
  return (
    <button
      onClick={() => signOut({ callbackUrl: "/" })}
      className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-poppins font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
    >
      Sign out
    </button>
  );
}