Sign In 1

"use client"

import { useId, useState } from "react"
import Link from "next/link"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"
import { EyeIcon, EyeOffIcon } from 'lucide-react'

type SocialProvider = {
  label: string
  icon: React.ComponentType<React.HTMLAttributes<SVGElement>>
}

const providers: SocialProvider[] = [
  { label: "Google", icon: Icons.Google },
  { label: "Apple", icon: Icons.Apple },
  { label: "GitHub", icon: Icons.GitHub },
]

export function SignIn() {
  const id = useId()
  const [showPassword, setShowPassword] = useState(false)

  return (
    <main
      aria-label="Sign in"
      className="w-full max-w-xl rounded-4xl text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none lg:max-w-4xl lg:bg-muted lg:p-1"
    >
      <section className="grid grid-cols-1 lg:grid-cols-2">
        <div className="flex flex-col gap-6 rounded-3xl bg-card p-6 shadow-elevated-lg">
          <div className="flex flex-col items-center gap-4">
            <FancyButton
              size="icon-lg"
              aria-label="Home"
              role="link"
              className="size-14 rounded-xl"
              render={<Link href="/" />}
            >
              <Icons.Logo aria-hidden="true" className="size-10" />
            </FancyButton>
            <div className="text-center">
              <h1 className="text-xl font-semibold tracking-tight text-balance">
                Welcome back
              </h1>
              <p className="text-base text-muted-foreground">
                Sign in to continue to your dashboard.
              </p>
            </div>
          </div>

          <div className="flex gap-3 *:flex-1 *:[&>svg]:size-5">
            {providers.map(({ icon: Icon, label }) => (
              <Button
                key={label}
                type="button"
                variant="secondary"
                aria-label={`Continue with ${label}`}
                size="lg"
              >
                <Icon aria-hidden="true" />
              </Button>
            ))}
          </div>

          <div className="relative text-center text-xs text-muted-foreground uppercase before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-border/50 before:content-['']">
            <span className="relative bg-card px-2">or with</span>
          </div>

          <FieldGroup className="gap-3">
            <Field className="gap-1">
              <FieldLabel htmlFor={`${id}-email`} className="gap-0">
                Email <span className="text-primary">*</span>
              </FieldLabel>
              <Input
                id={`${id}-email`}
                type="email"
                placeholder="contact@diarmuradi.com"
                className="h-10 bg-transparent"
              />
            </Field>

            <Field className="gap-1">
              <div className="flex items-center justify-between">
                <FieldLabel htmlFor={`${id}-password`} className="gap-0">
                  Password <span className="text-primary">*</span>
                </FieldLabel>
                <Button
                  variant="link"
                  className="h-auto p-0"
                  nativeButton={false}
                  role="link"
                  render={<Link href="/reset-password" />}
                >
                  Forgot?
                </Button>
              </div>
              <InputGroup className="h-10 bg-transparent">
                <InputGroupInput
                  id={`${id}-password`}
                  type={showPassword ? "text" : "password"}
                  placeholder="••••••••••"
                  className="h-10 bg-transparent"
                />
                <InputGroupAddon align="inline-end">
                  <InputGroupButton
                    size="icon-xs"
                    type="button"
                    onClick={() => setShowPassword((show) => !show)}
                    aria-label={
                      showPassword ? "Hide password" : "Show password"
                    }
                  >
                    {showPassword ? <EyeOffIcon  aria-hidden="true" /> : <EyeIcon  aria-hidden="true" />}
                  </InputGroupButton>
                </InputGroupAddon>
              </InputGroup>
            </Field>

            <FancyButton type="button" size="lg" className="w-full">
              Sign in
            </FancyButton>
          </FieldGroup>

          <p className="text-center text-sm text-muted-foreground">
            New here?{" "}
            <Button
              variant="link"
              className="h-auto p-0"
              nativeButton={false}
              role="link"
              render={<Link href="/sign-up" />}
            >
              Create an account
            </Button>
          </p>
        </div>

        <div className="flex flex-col justify-end p-12 max-lg:hidden">
          <div className="mt-auto flex flex-col gap-6">
            <p className="text-lg leading-relaxed">
              &ldquo;The Google sign-in is{" "}
              <span className="font-medium text-primary">seamless</span>. No new
              passwords to remember — just one click and I&apos;m in.&rdquo;
            </p>
            <div className="flex items-center gap-3">
              <Avatar className="size-10">
                <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
                <AvatarFallback>S</AvatarFallback>
              </Avatar>
              <div>
                <p className="text-sm font-semibold">Shadcn</p>
                <p className="text-xs text-muted-foreground">Developer</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}