Sign Up 4

"use client"

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

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'

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

  return (
    <main
      aria-label="Sign up"
      className="flex w-full max-w-sm flex-col items-center gap-4 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <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="flex w-full flex-col gap-6 rounded-4xl bg-card p-6 shadow-elevated-lg">
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance sm:text-2xl">
            Create a new account
          </h1>
          <p className="text-base text-muted-foreground">
            Enter your details to register.
          </p>
        </div>

        <Button type="button" variant="outline" size="lg" className="w-full">
          <Icons.Google aria-hidden="true" />
          Continue with Google
        </Button>

        <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 continue with email</span>
        </div>

        <FieldGroup className="gap-3">
          <div className="grid grid-cols-2 gap-3">
            <Field className="gap-1">
              <FieldLabel htmlFor={`${id}-first-name`}>First name</FieldLabel>
              <Input
                id={`${id}-first-name`}
                type="text"
                placeholder="Diar"
                className="h-10 bg-transparent"
              />
            </Field>
            <Field className="gap-1">
              <FieldLabel htmlFor={`${id}-last-name`}>Last name</FieldLabel>
              <Input
                id={`${id}-last-name`}
                type="text"
                placeholder="Muradi"
                className="h-10 bg-transparent"
              />
            </Field>
          </div>

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

          <Field className="gap-1">
            <FieldLabel htmlFor={`${id}-password`}>Password</FieldLabel>
            <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">
            Create account
          </FancyButton>
        </FieldGroup>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-sm text-muted-foreground">
        <span>Already registered?</span>
        <Button
          variant="link"
          className="h-auto p-0"
          nativeButton={false}
          role="link"
          render={<Link href="/sign-in" />}
        >
          Log in
        </Button>
      </div>
    </main>
  )
}