"use client";

import * as React from "react";
import { LucideIcon } from "lucide-react";

interface InputProps extends React.InputHTMLAttributes<
  HTMLInputElement | HTMLTextAreaElement
> {
  label?: string;
  icon?: LucideIcon;
  isTextArea?: boolean;
  rows?: number;
}

export function Input({
  label,
  icon: Icon,
  isTextArea,
  className = "",
  ...props
}: InputProps) {
  const InputComponent = isTextArea ? "textarea" : "input";

  return (
    <div className="space-y-4 w-full">
      {label && (
        <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">
          {label}
        </label>
      )}
      <div className="relative group">
        {Icon && (
          <div
            className={`absolute left-6 ${isTextArea ? "top-10" : "top-1/2"} -translate-y-1/2 text-black transition-colors`}
          >
            <Icon size={24} />
          </div>
        )}
        <InputComponent
          {...(props as any)}
          className={`w-full p-8 ${Icon ? "pl-16" : "px-10"} bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl focus:shadow-2xl ${isTextArea ? "resize-none" : ""} ${className}`}
        />
      </div>
    </div>
  );
}
