import { signInWithCreds, signInWithDiscord } from "@/actions/auth";
import { Icon } from "./Icon";

export default function SignIn() {
  return (
    <div className="flex flex-col gap-2">
      <form action={signInWithCreds} className="flex flex-col gap-2">
        <input
          className="w-full"
          placeholder="email"
          type="email"
          name="email"
        />
        <input
          className="w-full"
          placeholder="password"
          type="password"
          name="password"
        />
      </form>
      <div className="flex items-center gap-1">
        <div className="dark:border-dark-500 border-primary-600 flex-grow border-b"></div>
        <div className="dark:text-dark-500 text-primary-600 ">or</div>
        <div className="dark:border-dark-500 border-primary-600 flex-grow border-b"></div>
      </div>
      <form action={signInWithDiscord}>
        <button className="w-full p-2 bg-[#816ab1] rounded-lg" type="submit">
          <Icon icon="Discord" className="mr-4 inline-block" />
          Sign in with Discord
        </button>
      </form>
    </div>
  );
}