"use client";

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose } from "@fortawesome/free-solid-svg-icons";
// import styles from "./index.module.scss";
export default function OwnInput({
  value,
  onChange,
  type = "text",
  name,
  placeholder,
  clearable,
  disabled = false,
  className,
  inputClassName = "",
  id,
}) {
  return (
    <div className={`flex flex-1 relative ${className}`}>
      <input
        id={id}
        placeholder={placeholder}
        disabled={disabled}
        name={name}
        type={type}
        maxLength={11}
        onChange={(e) => onChange(e.target?.value)}
        value={value}
        className={`w-full placeholder:text-[#FFFFFF80] text-[16px] focus:text-[16px] ${inputClassName}`}
        // style={{ fontSize: `16px!important` }}
      />
      {clearable && value != "" && (
        <div className="w-4 h-4 absolute right-2 top-[2px] flex justify-center items-center bg-[#ffffff33] p-1 rounded-full">
          <FontAwesomeIcon
            color="#ffffff40"
            icon={faClose}
            style={{ maxWidth: "12px" }}
            onClick={() => {
              onChange && onChange("");
            }}
          />
        </div>
      )}
    </div>
  );
}