import type { HTMLInputTypeAttribute } from "react";
import * as React from "react";
import { cn } from "@/lib/utils";

type InputProps = Omit<React.ComponentProps<"input">, "type"> & {
	type?: HTMLInputTypeAttribute | "token";
	children?: React.ReactNode;
	className?: string;
	label?: string;

	rightContent?: React.ReactNode;
};

const Input = React.forwardRef<HTMLInputElement, InputProps>(
	({ children, className, type, label, required, ...props }, ref) => {
		return (
			<div className="group flex w-full flex-col gap-3">
				{label && (
					<span
						data-required={required}
						className="text-text-light-500 font-[500] text-[12px] after:ml-0.5 after:text-negative-primary data-[required=true]:after:content-['*']"
					>
						{label}
					</span>
				)}

				<div
					className={cn(
						"group flex  rounded-[8px]   items-center w-full border  transition-colors border-fill-200 hover:border-fill-400",
						"focus-within:border-fill-400",
						"disabled:border-b-fill-secondary",
						"data-[invalid=true]:border-b-negative-primary",
					)}
				>
					<input
						type={type}
						ref={ref}
						data-disabled={props.disabled}
						className={cn(
							"text-[14px] px-4 py-3   flex  w-full border-none bg-transparent   transition-colors placeholder:text-text-secondary",
							"focus:placeholder:opacity-0 disabled:cursor-not-allowed disabled:text-text-quartinary",
							"data-[disabled=true]:placeholder:text-text-quinary",
							className,
						)}
						{...props}
					/>

					{props.rightContent && (
						<div className="pr-2 pb-2 flex items-center gap-1 text-text-primary text-sm">
							{props.rightContent}
						</div>
					)}
				</div>

				{children}
			</div>
		);
	},
);
Input.displayName = "Input";

export { Input };
