// components/ui/form.tsx
"use client";

import * as React from "react";
import { cn } from "@/lib/cn";

export const labelClass = "text-xs font-medium text-zinc-400";

export const inputBaseClass =
  "w-full rounded-md border border-zinc-800 bg-zinc-900/70 px-3 py-2 text-sm text-zinc-50 " +
  "placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-amber-400";

export const buttonBaseClass =
  "w-full rounded-md border border-amber-400/70 bg-amber-400/20 px-3 py-2 text-sm font-semibold text-amber-100 " +
  "hover:bg-amber-400/30 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";

export const Input = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>(function Input({ className, ...props }, ref) {
  return <input ref={ref} className={cn(inputBaseClass, className)} {...props} />;
});

export const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.TextareaHTMLAttributes<HTMLTextAreaElement>
>(function Textarea({ className, ...props }, ref) {
  return (
    <textarea ref={ref} className={cn(inputBaseClass, className)} {...props} />
  );
});

export function Button({
  className,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return <button className={cn(buttonBaseClass, className)} {...props} />;
}

type FieldProps = {
  label: string;
  htmlFor: string;
  hint?: React.ReactNode;
  error?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
};

export function Field({
  label,
  htmlFor,
  hint,
  error,
  className,
  children,
}: FieldProps) {
  return (
    <div className={cn("space-y-1", className)}>
      <label className={labelClass} htmlFor={htmlFor}>
        {label}
      </label>

      {children}

      {error ? (
        <p className="text-xs text-red-300">{error}</p>
      ) : hint ? (
        <p className="text-xs text-zinc-500">{hint}</p>
      ) : null}
    </div>
  );
}