// Example: controlled filter bar - search, single + multi select, clear-all.
import { useState } from "react"
import { Flag, User } from "lucide-react"

import { FilterBar } from "@/components/widgets/filter-bar/FilterBar"
import type { DropdownOption } from "@/components/widgets/filter-bar/FilterBar.types"

const severityOptions: DropdownOption[] = [
  { key: "critical", value: "Critical" },
  { key: "high", value: "High" },
  { key: "medium", value: "Medium" },
]

const ownerOptions: DropdownOption[] = [
  { key: "chen", value: "M. Chen" },
  { key: "okafor", value: "A. Okafor" },
]

export default function Example() {
  const [query, setQuery] = useState("")
  const [severity, setSeverity] = useState<string>()
  const [owners, setOwners] = useState<string[]>([])

  // Feed these three values into your list query (thunk, hook, etc.).
  return (
    <FilterBar
      search={{
        value: query,
        onChange: setQuery,
        placeholder: "Search signals...",
      }}
      filters={[
        {
          id: "severity",
          options: severityOptions,
          placeholder: "Severity",
          icon: <Flag className="h-4 w-4 text-muted-foreground" />,
          value: severity,
          onChange: (option) => setSeverity(option.key),
        },
        {
          id: "owner",
          multiSelect: true,
          options: ownerOptions,
          placeholder: "Owner",
          icon: <User className="h-4 w-4 text-muted-foreground" />,
          value: owners,
          onChange: (options) => setOwners(options.map((o) => o.key)),
        },
      ]}
      onClearAll={() => {
        setQuery("")
        setSeverity(undefined)
        setOwners([])
      }}
    />
  )
}