"use client";
// Adapted from Adobe React Spectrum starters (Apache-2.0).
// Modified: owned composition, local runtime, scoped CSS and customization.
// See THIRD_PARTY_NOTICES.md.
import {
  SearchField as AriaSearchField,
  type SearchFieldProps as AriaProps,
  Input,
  Group,
  Button,
  Label,
  Text,
  FieldError,
  type ValidationResult,
  composeRenderProps,
} from "./react-aria-runtime.js";
export interface SearchFieldProps extends Omit<AriaProps, "children"> {
  label: string;
  description?: string;
  errorMessage?: string | ((validation: ValidationResult) => string);
  placeholder?: string;
}
export function SearchField({
  label,
  description,
  errorMessage,
  placeholder,
  className,
  ...props
}: SearchFieldProps) {
  return (
    <AriaSearchField
      {...props}
      className={composeRenderProps(
        className,
        (value) => `ynr-search-field ynr-aria ${value ?? ""}`,
      )}
    >
      <Label className="ynr-aria-label">{label}</Label>
      <Group className="ynr-aria-control">
        <Input className="ynr-aria-input" placeholder={placeholder} />
        <Button aria-label="Clear search" className="ynr-aria-button">
          ×
        </Button>
      </Group>
      {description && (
        <Text slot="description" className="ynr-aria-description">
          {description}
        </Text>
      )}
      <FieldError className="ynr-aria-error">{errorMessage}</FieldError>
    </AriaSearchField>
  );
}