"use client";

import type * as React from "react";

import { cn } from "./cn";

/*
 * No Base UI primitive: a textarea has no behaviour a library needs to manage,
 * only the same surface an Input has. So this deliberately reuses the Input
 * contract — `--input-radius`, `--input-background`, `--input-padding-x-md`,
 * `--input-disabled-background` — rather than growing a `--textarea-*` set.
 *
 * That is not a shortcut. Both products already draw the two the same way and
 * differ from each other in exactly the three places those tokens cover:
 * Enterprise is `rounded-md` with a filled background, NOKL is `rounded-lg` and
 * transparent, and their horizontal padding differs by 2px. A field and a
 * multi-line field that disagreed on radius within one product would be the
 * bug, not the feature.
 *
 * Height is where it stops borrowing. Input has fixed step heights; a textarea
 * grows, so it takes a minimum and `field-sizing-content`, which lets the
 * browser size it to what has been typed. Both products already ship that.
 */

export interface TextareaProps extends React.ComponentProps<"textarea"> {}

function Textarea({ className, ...props }: TextareaProps) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full min-w-0",
        "border border-(color:--color-border)",
        "rounded-(--input-radius) bg-(color:--input-background)",
        "px-(--input-padding-x-md) py-2",
        "text-(length:--font-size-control) text-(color:--color-content)",
        "any-pointer-coarse:text-(length:--font-size-control-coarse)",
        "placeholder:text-(color:--color-content-muted)",
        "transition-[border-color,background-color,outline-color]",
        "duration-(--motion-duration) ease-(--motion-ease)",
        "outline-none focus-visible:border-(color:--color-brand-accent)",
        "focus-visible:outline-solid",
        "focus-visible:outline-(length:--focus-ring-width)",
        "focus-visible:outline-(color:--color-focus-ring)",
        // Inset, like Input: a textarea is often flush against a form edge and
        // an outset ring would be clipped there.
        "focus-visible:-outline-offset-1",
        "aria-invalid:border-(color:--color-action-danger)",
        "aria-invalid:focus-visible:outline-(color:--color-action-danger)",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "disabled:bg-(color:--input-disabled-background)",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };