'use client';

import * as React from 'react';
import { Eye, EyeOff, Lock } from 'lucide-react';

import * as Input from '@/components/ui/input';

type PasswordInputProps = Omit<
  React.ComponentPropsWithoutRef<typeof Input.Input>,
  'type'
> & {
  icon?: React.ComponentType<{ className?: string }> | null;
  rootClassName?: string;
  wrapperClassName?: string;
  toggleClassName?: string;
  visibilityIconClassName?: string;
};

function PasswordInput({
  icon: Icon = Lock,
  placeholder = '••••••••••',
  rootClassName,
  wrapperClassName,
  toggleClassName,
  visibilityIconClassName = 'text-text-soft-400 group-has-[disabled]:text-text-disabled-300 size-5',
  ...props
}: PasswordInputProps) {
  const [showPassword, setShowPassword] = React.useState(false);

  return (
    <Input.Root className={rootClassName}>
      <Input.Wrapper className={wrapperClassName}>
        {Icon ? <Input.Icon as={Icon} /> : null}
        <Input.Input
          type={showPassword ? 'text' : 'password'}
          placeholder={placeholder}
          {...props}
        />
        <button
          type='button'
          className={toggleClassName}
          onClick={() => setShowPassword((s) => !s)}
        >
          {showPassword ? (
            <EyeOff className={visibilityIconClassName} />
          ) : (
            <Eye className={visibilityIconClassName} />
          )}
        </button>
      </Input.Wrapper>
    </Input.Root>
  );
}

export { PasswordInput as Root };