// src/components/templates/todos/FilterBar.tsx
import { jsx, jsxs } from "react/jsx-runtime";
function FilterBar({ value, onChange, categories }) {
  const handleChange = (key, nextValue) => {
    onChange({ ...value, [key]: nextValue });
  };
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border bg-card grid gap-3 rounded-2xl border p-4 md:grid-cols-4",
    children: [
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Status",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.status,
            onChange: (event) => handleChange("status", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All tasks"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "active",
                children: "Active"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "completed",
                children: "Completed"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Priority",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.priority,
            onChange: (event) => handleChange("priority", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "LOW",
                children: "Low"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "MEDIUM",
                children: "Medium"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "HIGH",
                children: "High"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "URGENT",
                children: "Urgent"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Category",
          /* @__PURE__ */ jsxs("select", {
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            value: value.categoryId,
            onChange: (event) => handleChange("categoryId", event.target.value),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All categories"
              }),
              categories.map((category) => /* @__PURE__ */ jsx("option", {
                value: category.id,
                children: category.name
              }, category.id))
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        children: [
          "Search",
          /* @__PURE__ */ jsx("input", {
            type: "search",
            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
            placeholder: "Search by title",
            value: value.search,
            onChange: (event) => handleChange("search", event.target.value)
          })
        ]
      })
    ]
  });
}
export {
  FilterBar
};
