import { Button } from "@/registry/ui/button"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/ui/card"
import { Checkbox } from "@/registry/ui/checkbox"
import { Input } from "@/registry/ui/input"
import { Label } from "@/registry/ui/label"
import { Separator } from "@/registry/ui/separator"

export default function AuthSignin() {
  return (
    <section className="flex min-h-[36rem] items-center justify-center px-6 py-16">
      <div className="w-full max-w-sm">
        <Card>
          <CardHeader>
            <CardTitle>Sign in</CardTitle>
            <p className="text-sm text-muted">
              Use the address your workspace was created with.
            </p>
          </CardHeader>

          <CardContent>
            <form className="space-y-4">
              <div className="space-y-1.5">
                <Label htmlFor="signin-email" required>
                  Email
                </Label>
                <Input
                  id="signin-email"
                  type="email"
                  autoComplete="email"
                  placeholder="you@company.com"
                  required
                />
              </div>

              <div className="space-y-1.5">
                <div className="flex items-baseline justify-between">
                  <Label htmlFor="signin-password" required>
                    Password
                  </Label>
                  <a
                    href="#"
                    className="text-xs text-muted underline underline-offset-4 hover:text-fg"
                  >
                    Forgot?
                  </a>
                </div>
                <Input
                  id="signin-password"
                  type="password"
                  autoComplete="current-password"
                  required
                />
              </div>

              <label className="flex items-center gap-2 text-sm text-muted">
                <Checkbox name="remember" defaultChecked />
                Keep me signed in
              </label>

              <Button type="submit" className="w-full">
                Sign in
              </Button>
            </form>

            {/* flex-1 rather than a width class: Separator already sets
                w-full, and two conflicting width utilities would be settled
                by stylesheet order instead of by this file. */}
            <div className="my-5 flex items-center gap-3">
              <Separator className="flex-1" />
              <span className="font-mono text-xs whitespace-nowrap text-muted">or</span>
              <Separator className="flex-1" />
            </div>

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

          <CardFooter className="justify-center text-sm text-muted">
            No account?{" "}
            <a href="#" className="font-medium text-fg underline underline-offset-4">
              Create one
            </a>
          </CardFooter>
        </Card>
      </div>
    </section>
  )
}