Sign Up 2

"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, PlusIcon } from 'lucide-react'

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

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

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

  return (
    <main
      aria-label="Sign up"
      className="flex w-full max-w-md flex-col gap-6 rounded-4xl bg-card p-6 text-foreground shadow-elevated-lg motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <div className="flex flex-col items-center gap-4">
        <div className="relative flex size-14 items-center justify-center">
          <div className="absolute inset-0 scale-125 rounded-full bg-primary/10 mask-t-from-20% mask-t-to-100%" />
          <div className="relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset">
            <PlusIcon  aria-hidden="true" className="size-6 text-primary" />
          </div>
        </div>
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight text-balance">
            Create a new account
          </h1>
          <p className="text-base text-muted-foreground">
            Enter your details to register.
          </p>
        </div>
      </div>

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

      <FieldGroup className="gap-3">
        <Field className="gap-1">
          <FieldLabel htmlFor={`${id}-name`}>Full name</FieldLabel>
          <Input
            id={`${id}-name`}
            type="text"
            placeholder="Diar Muradi"
            className="h-10 bg-transparent"
          />
        </Field>

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