import React from "react";
import { AssetSelector } from "./AssetSelector";
import { Typography } from "@gardenfi/garden-book";

type InputFieldProps = {
  id: string;
  label: string;
  value: string | null;
  readOnly?: boolean;
  onChange?: (value: string) => void;
  placeholder?: string;
  showAssetSelector?: boolean;
  isFromAsset?: boolean;
  openDropdown?: string | null;
  setOpenDropdown?: (id: string | null) => void;
  dropdownId?: string;
  asset?: any; // Optional asset property
};

const InputField: React.FC<InputFieldProps> = ({
  id,
  label,
  value,
  readOnly,
  onChange,
  placeholder,
  showAssetSelector = false,
  isFromAsset = false,
  openDropdown,
  setOpenDropdown,
  dropdownId,
  asset,
}) => (
  <div className="flex flex-col gap-2 bg-white rounded-2xl p-4 shadow-md relative">
    <label htmlFor={id} className="block">
      <Typography size="h4" weight="medium">{label}</Typography>
    </label>
    <div className="flex items-center w-full">
      <input
        id={id}
        placeholder={placeholder}
        value={value || ""}
        type="text"
        readOnly={readOnly}
        onChange={(e) => onChange?.(e.target.value)}
        className={`w-full rounded-md text-black outline-none`}
      />
    </div>

    {showAssetSelector && (
      <div className="absolute right-3 mt-2">
        <AssetSelector
          isFromAsset={isFromAsset}
          openDropdown={openDropdown!}
          setOpenDropdown={setOpenDropdown!}
          dropdownId={dropdownId!}
        />
      </div>
    )}

    {/* Optionally show asset info */}
    {asset && (
      <div className="mt-2 text-sm text-gray-500">
        {asset.symbol && <p>Symbol: {asset.symbol}</p>}
        {asset.decimals && <p>Decimals: {asset.decimals}</p>}
      </div>
    )}
  </div>
);

export default InputField;