import React from "react";
import { LockIcon, EyeIcon, EyeOffIcon } from "../ui/icon";
import { Input, InputIcon, InputField, InputSlot } from "../ui/input";
import { VariantProps } from "@gluestack-ui/nativewind-utils";

type props = React.ComponentProps<typeof Input> &
  VariantProps<typeof InputField>;

export default function PasswordField({ value, onChangeText }: props) {
  const [showPassword, setShowPassword] = React.useState(false);
  const handleState = () => {
    setShowPassword((showState) => {
      return !showState;
    });
  };

  return (
    <Input variant="outline" size="xl">
      <InputIcon color="black" as={LockIcon} />
      <InputField
        value={value}
        onChangeText={onChangeText}
        type={showPassword ? "text" : "password"}
        placeholder="⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆"
      />
      <InputSlot className="pr-3" onPress={handleState}>
        <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
      </InputSlot>
    </Input>
  );
}