import * as React from 'react';

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

/**
 * The composer field, and the only multi-line input in the product.
 *
 * This was the last un-adapted shadcn primitive: a 6px radius, a transparent
 * fill, a `shadow-sm` nothing else in PIG carries, and a 1px `ring-ring` focus
 * treatment — sitting directly beside a 12px-radius Send button on the control
 * the whole company types into first, because `/` redirects to `/piggy`.
 *
 * It now matches `Input` from `@/components/ui` line for line: 12px radius
 * because it is a control, `bg-surface` because a transparent field on a
 * tinted canvas has no edge, and `focus-visible:border-accent` so focus reads
 * as the border changing rather than a second outline appearing outside it.
 * The global `:focus-visible` rule still paints the brand ring on top.
 *
 * `min-h-[60px]` is kept: this is a growing composer, and the auto-resize
 * logic at its call sites measures against a floor it already assumes.
 */
const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'textarea'>>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          'flex min-h-[60px] w-full rounded-lg border border-border bg-surface px-3 py-2 text-fg',
          'placeholder:text-muted focus-visible:border-accent',
          'transition-colors duration-1 ease-enter',
          'disabled:cursor-not-allowed disabled:opacity-50',
          // The base stylesheet enforces a 16px minimum here so Safari does not
          // zoom the viewport on focus; nothing may override it downward.
          className,
        )}
        ref={ref}
        {...props}
      />
    );
  },
);
Textarea.displayName = 'Textarea';

export { Textarea };
