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

export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  function Input({ className, ...props }, ref) {
    return (
      <input
        ref={ref}
        className={cn(
          'h-8 w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
          className,
        )}
        {...props}
      />
    );
  },
);

export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
  function Textarea({ className, ...props }, ref) {
    return (
      <textarea
        ref={ref}
        className={cn(
          'mono w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] p-3 text-[13px] leading-relaxed text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
          className,
        )}
        {...props}
      />
    );
  },
);

export function Label({
  children,
  hint,
  className,
  htmlFor,
}: {
  children: React.ReactNode;
  hint?: string;
  className?: string;
  htmlFor?: string;
}) {
  return (
    <div className={cn('flex items-baseline justify-between', className)}>
      <label htmlFor={htmlFor} className="text-[12px] font-medium text-[--color-fg]">
        {children}
      </label>
      {hint && <span className="mono text-[11px] text-[--color-fg-subtle]">{hint}</span>}
    </div>
  );
}