import * as React from "react"

import { Eye, EyeOff } from "lucide-react"

import { cn } from "@/lib/utils"

import { Button } from "./button"

interface PasswordInputProps extends React.ComponentProps<"input"> {

  error?: string

}

const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(

  ({ className, error, ...props }, ref) => {

    const [showPassword, setShowPassword] = React.useState(false)

    return (

      <div className="relative">

        <input

          type={showPassword ? "text" : "password"}

          data-slot="input"

          className={cn(

            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 pr-10 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",

            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",

            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

            className

          )}

          ref={ref}

          aria-invalid={!!error}

          {...props}

        />

        <Button

          type="button"

          variant="ghost"

          size="icon-sm"

          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"

          onClick={() => setShowPassword(!showPassword)}

          aria-label={showPassword ? "Hide password" : "Show password"}

        >

          {showPassword ? (

            <EyeOff className="h-4 w-4 text-muted-foreground" />

          ) : (

            <Eye className="h-4 w-4 text-muted-foreground" />

          )}

        </Button>

      </div>

    )

  }

)

PasswordInput.displayName = "PasswordInput"

export { PasswordInput }