Password

import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useState } from 'react'
import {
	InputGroup,
	InputGroupAddon,
	InputGroupButton,
	InputGroupInput,
} from '@/components/ui/input-group'

export function Password(props: React.ComponentProps<typeof InputGroupInput>) {
	const [isVisible, setIsVisible] = useState<boolean>(false)

	const toggleVisibility = () => setIsVisible((prevState) => !prevState)

	return (
		<InputGroup>
			<InputGroupInput
				placeholder="password"
				type={isVisible ? 'text' : 'password'}
				{...props}
			/>
			<InputGroupAddon align="inline-end">
				<InputGroupButton onClick={toggleVisibility}>
					{isVisible ? (
						<EyeOffIcon size={16} aria-hidden="true" />
					) : (
						<EyeIcon size={16} aria-hidden="true" />
					)}
				</InputGroupButton>
			</InputGroupAddon>
		</InputGroup>
	)
}