import { forwardRef, type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";

const inputBase =
  "w-full rounded-xl border border-zinc-700/60 bg-zinc-800/80 px-4 py-2.5 text-zinc-100 placeholder:text-zinc-500 focus:border-accent-500/50 focus:outline-none focus:ring-1 focus:ring-accent-500/30";

export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(function Input(
  { className = "", ...rest },
  ref,
) {
  return <input ref={ref} className={`${inputBase} ${className}`} {...rest} />;
});

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(function Textarea(
  { className = "", rows = 3, ...rest },
  ref,
) {
  return <textarea ref={ref} rows={rows} className={`${inputBase} resize-y ${className}`} {...rest} />;
});