import Link from "next/link";

import { Button } from "@/components/ui/button";

function BrandMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className={className}
    >
      <path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" />
      <rect x="14.5" y="2.5" width="7" height="7" rx="1" transform="rotate(-8 18 6)" />
    </svg>
  );
}

export default function LoginCard() {
  return (
    <section className="flex min-h-[70vh] items-center justify-center bg-muted/30 px-6 py-16">
      <div className="w-full max-w-sm rounded-xl border border-border/60 bg-background p-8 shadow-sm">
        <div className="flex flex-col items-center text-center">
          <span className="flex items-center gap-2 text-lg font-bold tracking-tight">
            <BrandMark className="size-6" />
            Blockforge
          </span>
          <h1 className="mt-4 text-xl font-semibold tracking-tight">
            Welcome back
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Sign in to your Blockforge workspace.
          </p>
        </div>

        <form className="mt-8 space-y-4">
          <div className="space-y-2">
            <label htmlFor="signin-email" className="text-sm font-medium">
              Email
            </label>
            <input
              id="signin-email"
              type="email"
              autoComplete="email"
              placeholder="you@company.com"
              className="h-9 w-full rounded-lg border border-input bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <label htmlFor="signin-password" className="text-sm font-medium">
                Password
              </label>
              <Link
                href="#"
                className="text-xs text-muted-foreground underline-offset-4 hover:underline"
              >
                Forgot it?
              </Link>
            </div>
            <input
              id="signin-password"
              type="password"
              autoComplete="current-password"
              className="h-9 w-full rounded-lg border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
          </div>
          <Button type="submit" className="w-full">
            Sign in
          </Button>
        </form>

        <div className="my-6 flex items-center gap-3">
          <span className="h-px flex-1 bg-border" />
          <span className="text-xs text-muted-foreground">or</span>
          <span className="h-px flex-1 bg-border" />
        </div>

        <Button variant="outline" className="w-full">
          Continue with GitHub
        </Button>

        <p className="mt-6 text-center text-sm text-muted-foreground">
          New here?{" "}
          <Link
            href="#"
            className="font-medium text-foreground underline-offset-4 hover:underline"
          >
            Create an account
          </Link>
        </p>
      </div>
    </section>
  );
}
Login Card
