"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "../ui/dropdown-menu"

export type FilterFieldMenuItem = {
  key: string
  label: string
  icon?: string
}

export interface FilterByFieldDropdownContentProps {
  items: FilterFieldMenuItem[]
  onSelectField: (fieldKey: string) => void
  align?: React.ComponentProps<typeof DropdownMenuContent>["align"]
  className?: string
}

/** Scrollable “Filter by field” menu — header stays put; field list scrolls. */
export function FilterByFieldDropdownContent({
  items,
  onSelectField,
  align = "start",
  className,
}: FilterByFieldDropdownContentProps) {
  return (
    <DropdownMenuContent
      align={align}
      className={cn(
        "flex max-h-[min(70vh,20rem)] flex-col overflow-hidden p-0",
        className,
      )}
    >
      <DropdownMenuLabel className="shrink-0 px-3 py-2 text-xs">
        Filter by field
      </DropdownMenuLabel>
      <DropdownMenuSeparator className="shrink-0" />
      <div
        className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1"
        role="group"
        aria-label="Filter fields"
      >
        {items.map(item => (
          <DropdownMenuItem
            key={item.key}
            onSelect={() => onSelectField(item.key)}
          >
            {item.icon ? (
              <i className={`fa-light ${item.icon}`} aria-hidden="true" />
            ) : null}
            {item.label}
          </DropdownMenuItem>
        ))}
      </div>
    </DropdownMenuContent>
  )
}