import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div className={cn("flex flex-col gap-4 sm:gap-6", className)} {...props}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid p-0 md:grid-cols-2">
          <form className="p-4 sm:p-6 md:p-8">
            <FieldGroup className="gap-4 sm:gap-6">
              <div className="flex flex-col items-center gap-2 text-center">
                <h1 className="text-xl sm:text-2xl font-bold">خوش آمدید</h1>
                <p className="text-sm sm:text-base text-muted-foreground text-balance">
                  به حساب فیپ خود وارد شوید
                </p>
              </div>
              <Field>
                <FieldLabel htmlFor="email" className="text-sm sm:text-base">
                  ایمیل
                </FieldLabel>
                <Input
                  id="email"
                  type="email"
                  placeholder="m@example.com"
                  className="h-10 sm:h-11"
                  required
                />
              </Field>
              <Field>
                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-0">
                  <FieldLabel
                    htmlFor="password"
                    className="text-sm sm:text-base"
                  >
                    رمز عبور
                  </FieldLabel>
                  <a
                    href="#"
                    className="text-xs sm:text-sm sm:ml-auto underline-offset-2 hover:underline"
                  >
                    رمز عبور را فراموش کرده‌اید؟
                  </a>
                </div>
                <Input
                  id="password"
                  type="password"
                  className="h-10 sm:h-11"
                  required
                />
              </Field>
              <Field>
                <Button type="submit" size="lg" className="w-full">
                  ورود
                </Button>
              </Field>
              <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
                یا ادامه با
              </FieldSeparator>
              <Field className="">
                <Button variant="outline" type="button" size="lg" className="w-full">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    className="w-4 h-4 sm:w-5 sm:h-5"
                  >
                    <path
                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
                      fill="currentColor"
                    />
                  </svg>
                  <span className="">ورود با گوگل</span>
                </Button>
              </Field>
            </FieldGroup>
          </form>
          <div className="bg-muted relative hidden md:block">
            <img
              src="/placeholder.svg"
              alt="Image"
              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
            />
          </div>
        </CardContent>
      </Card>
      <FieldDescription className="px-4 sm:px-6 text-xs sm:text-sm text-center">
        با کلیک روی ادامه، شما با <a href="#">شرایط استفاده</a> و{" "}
        <a href="#">سیاست حریم خصوصی</a> ما موافقت می‌کنید.
      </FieldDescription>
    </div>
  );
}