Search and filters

import {
  Badge,
  Combobox,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  ToggleGroup,
  ToggleGroupItem,
} from "@cooud-ui/ui";
import { LayoutGrid, List, Search, SlidersHorizontal, X } from "lucide-react";

const statusOptions = [
  { label: "All statuses", value: "all" },
  { label: "Active", value: "active" },
  { label: "Paused", value: "paused" },
  { label: "Archived", value: "archived" },
];

const ownerOptions = [
  { label: "Mara Castillo", value: "mara" },
  { label: "Devon Lane", value: "devon" },
  { label: "Priya Sharma", value: "priya" },
  { label: "Aiko Tanaka", value: "aiko" },
];

export function FilterBarBlock() {
  return (
    <section
      aria-label="Project filters"
      className="flex flex-col gap-4 rounded-2xl border border-border bg-surface-raised p-4 sm:p-5"
    >
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
        <label htmlFor="filter-bar-search" className="relative block w-full lg:max-w-xs">
          <span className="sr-only">Search projects</span>
          <Search
            className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary"
            aria-hidden="true"
          />
          <Input id="filter-bar-search" placeholder="Search projects..." className="pl-9" />
        </label>

        <div className="flex flex-1 flex-wrap items-center gap-3">
          <div className="w-full sm:w-44">
            <Select defaultValue="active">
              <SelectTrigger aria-label="Filter by status">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                {statusOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="w-full sm:w-52">
            <Combobox
              options={ownerOptions}
              defaultValue="mara"
              placeholder="Owner"
              searchPlaceholder="Search owners..."
              emptyText="No owner found."
              aria-label="Filter by owner"
            />
          </div>
        </div>

        <ToggleGroup type="single" defaultValue="grid" variant="outline" aria-label="View layout">
          <ToggleGroupItem value="list" aria-label="List view">
            <List className="size-4" aria-hidden="true" />
          </ToggleGroupItem>
          <ToggleGroupItem value="grid" aria-label="Grid view">
            <LayoutGrid className="size-4" aria-hidden="true" />
          </ToggleGroupItem>
        </ToggleGroup>
      </div>

      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-3">
        <div className="flex flex-wrap items-center gap-2">
          <span className="flex items-center gap-1.5 text-xs font-medium text-fg-tertiary">
            <SlidersHorizontal className="size-3.5" aria-hidden="true" />
            Filters
          </span>
          <Badge variant="secondary" className="gap-1.5 pr-1">
            Status: Active
            <button type="button" aria-label="Remove status filter" className="rounded-sm hover:text-fg">
              <X className="size-3" aria-hidden="true" />
            </button>
          </Badge>
          <Badge variant="secondary" className="gap-1.5 pr-1">
            Owner: Mara Castillo
            <button type="button" aria-label="Remove owner filter" className="rounded-sm hover:text-fg">
              <X className="size-3" aria-hidden="true" />
            </button>
          </Badge>
        </div>
        <span className="text-sm text-fg-tertiary">12 projects</span>
      </div>
    </section>
  );
}