import React from "react";
import { cn as _cn } from "../../utils/account";

const INPUT_BASE =
  "w-full dark:bg-[#A1E3F919] bg-[#A1E3F980] rounded-xl shadow relative grid items-center";

const INPUT =
  "peer h-11 w-full outline-0 focus:outline-0 rounded-xl shadow placeholder:hidden bg-transparent text-black dark:text-white";

const LABEL_BASE =
  "absolute duration-200 text-sm font-medium pointer-events-none text-black/70 dark:text-white/80 " +
  "peer-not-placeholder-shown:text-sm peer-not-placeholder-shown:px-3 peer-not-placeholder-shown:-translate-y-6 " +
  "peer-focus:text-sm peer-focus:px-3 peer-focus:-translate-y-6";

const RO_INPUT = "cursor-not-allowed opacity-80 select-text bg-black/0 dark:bg-black/0";
const RO_WRAP = "opacity-95 ring-1 ring-black/5 dark:ring-white/10";

export default function Input({
  label,
  value,
  onChange,
  type = "text",
  placeholder = " ",
  readOnly = false,
  disabled = false,
  inputMode,
  maxLength,
  autoComplete,

  rightSlot,
  leftSlot,

  className,
  inputClassName,
  labelClassName,
}) {
  const hasRight = !!rightSlot;
  const hasLeft = !!leftSlot;

  // ✅ padding برای input
  const inputPad = _cn(
    hasRight ? "pr-12" : "pr-4",
    hasLeft ? "pl-12" : "pl-4"
  );

  // ✅ padding برای label (که زیر آیکن نره)
  const labelPad = _cn(
    hasRight ? "pr-12" : "pr-4",
    hasLeft ? "pl-12" : "pl-4"
  );

  return (
    <div className={_cn(INPUT_BASE, readOnly ? RO_WRAP : "", className)}>
      <input
        className={_cn(INPUT, inputPad, readOnly ? RO_INPUT : "", inputClassName)}
        placeholder={placeholder}
        type={type}
        value={value}
        onChange={onChange}
        readOnly={readOnly}
        disabled={disabled}
        inputMode={inputMode}
        maxLength={maxLength}
        autoComplete={autoComplete}
      />

      {label ? (
        <label className={_cn(LABEL_BASE, labelPad, labelClassName)}>
          {label}
        </label>
      ) : null}

      {hasRight && (
        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center">
          {rightSlot}
        </div>
      )}

      {hasLeft && (
        <div className="absolute left-2 top-1/2 -translate-y-1/2 flex items-center">
          {leftSlot}
        </div>
      )}
    </div>
  );
}
