"use client";

import { ReactNode } from "react";

function Label({ children }: { children: ReactNode }) {
  return <label className="mb-1.5 block text-xs font-medium text-muted">{children}</label>;
}

export function TextField({
  label,
  ...props
}: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div>
      <Label>{label}</Label>
      <input
        {...props}
        className="w-full rounded-xl border border-black/[0.1] bg-transparent px-3.5 py-2.5 text-sm outline-none transition-colors focus:border-gold dark:border-white/[0.12]"
      />
    </div>
  );
}

export function SelectField({
  label,
  options,
  ...props
}: {
  label: string;
  options: { value: string; label: string }[];
} & React.SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <div>
      <Label>{label}</Label>
      <select
        {...props}
        className="w-full rounded-xl border border-black/[0.1] bg-transparent px-3.5 py-2.5 text-sm outline-none transition-colors focus:border-gold dark:border-white/[0.12]"
      >
        {options.map((o) => (
          <option key={o.value} value={o.value} className="bg-paper-elevated dark:bg-ink-elevated">
            {o.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export function TextAreaField({
  label,
  ...props
}: { label: string } & React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
  return (
    <div>
      <Label>{label}</Label>
      <textarea
        {...props}
        rows={props.rows ?? 3}
        className="w-full resize-none rounded-xl border border-black/[0.1] bg-transparent px-3.5 py-2.5 text-sm outline-none transition-colors focus:border-gold dark:border-white/[0.12]"
      />
    </div>
  );
}