import * as React from "react";

import { cn } from "@/lib/utils";

export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(

  function Input({ className, ...props }, ref) {

    return (

      <input

        ref={ref}

        className={cn(

          "h-10 w-full rounded-[var(--radius)] border border-[var(--color-border-default)] bg-[var(--color-bg-inset)]",

          "px-3 text-sm text-[var(--color-fg-primary)] placeholder:text-[var(--color-fg-tertiary)]",

          "transition-colors duration-[var(--duration-fast)]",

          "focus-visible:border-[var(--color-accent-teal)] focus-visible:outline-none",

          "aria-[invalid=true]:border-[var(--color-accent-red)]",

          "disabled:cursor-not-allowed disabled:opacity-50",

          className,

        )}

        {...props}

      />

    );

  },

);

export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(

  function Label({ className, ...props }, ref) {

    return (

      <label

        ref={ref}

        className={cn("text-xs font-medium text-[var(--color-fg-secondary)]", className)}

        {...props}

      />

    );

  },

);