//@/components/Input/Input.tsx

import React, { useState } from 'react';

type InputType = "text" | "password" | "email" | "number";

interface InputProps {
  type?: InputType;
  label?: string;
  placeholder?: string;
  helperText?: string;
  errorText?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const inputStyles = {
  base: "p-2 border rounded-md focus:outline-none",
  error: "border-red-500 text-red-800",
  default: "border-gray-300 text-black",
};

const Input: React.FC<InputProps> = ({
  type = "text",
  label,
  placeholder,
  helperText,
  errorText,
  value,
  onChange,
}) => {
  const hasError = Boolean(errorText);
  const inputClassName = `${inputStyles.base} ${hasError ? inputStyles.error : inputStyles.default}`;

  return (
    <div className="flex flex-col mb-4">
      {label && <label className="font-semibold mb-1">{label}</label>}
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        className={inputClassName}
      />
      {helperText && !hasError && <span className="text-sm text-gray-500">{helperText}</span>}
      {hasError && <span className="text-sm text-red-500">{errorText}</span>}
    </div>
  );
};

export { Input };