"use client"

import { cn } from "@/lib/utils"
import * as React from "react"

interface FilterFieldProps extends React.ComponentProps<"div"> {
  label: React.ReactNode
  error?: React.ReactNode
}

function FilterField({
  label,
  error,
  className,
  children,
  ...props
}: FilterFieldProps) {
  return (
    <div className={cn("space-y-2", className)} {...props}>
      <p className="text-sm font-medium text-foreground">{label}</p>
      {children}
      {error ? (
        <p className="text-sm text-destructive" role="alert">
          {error}
        </p>
      ) : null}
    </div>
  )
}

export { FilterField }
