import React, { forwardRef } from 'react';

export const FormInput = forwardRef<HTMLInputElement, any>(
  ({ label, error, className = "", ...props }, ref) => (
    <div className={`${className} relative`}>
      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        {label}
        {props.required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <input
        ref={ref}
        className={`
          w-full px-4 py-2 rounded-lg
          border border-gray-300 dark:border-gray-600
          bg-white dark:bg-gray-700
          text-gray-900 dark:text-white
          placeholder-gray-400 dark:placeholder-gray-500
          focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 
          focus:border-transparent
          transition-colors
          ${error ? "border-red-300 focus:ring-red-500" : ""}
        `}
        {...props}
      />
      {error && (
        <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
      )}
    </div>
  )
);

export const FormSelect = forwardRef<HTMLSelectElement, any>(
  ({ label, error, options, className = "", ...props }, ref) => (
    <div className={`${className} relative`}>
      <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
        {label}
        {props.required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <select
        ref={ref}
        className={`
        w-full px-4 py-3 rounded-lg
        border border-gray-300 dark:border-gray-600
        bg-white dark:bg-gray-700
        text-gray-900 dark:text-white
        transition duration-150 ease-in-out
        focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
        focus:border-transparent
        hover:border-gray-400 dark:hover:border-gray-500
        appearance-none
        ${error ? "border-red-300 focus:ring-red-500" : ""}
      `}
        {...props}
      >
        <option value="" className="dark:bg-gray-700">Selecione...</option>
        {options?.map((opt: any) => (
          <option key={opt.value} value={opt.value} className="dark:bg-gray-700">
            {opt.label}
          </option>
        ))}
      </select>
      {error && (
        <div className="absolute -bottom-5 left-0">
          <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
        </div>
      )}
    </div>
  ),
);

// Adicione classes dark mode similares para outros componentes de formulário