import React from "react";

export const Filters = ({ filters, onChange }) => {
  return (
    <div className="flex flex-wrap items-center gap-2.5">
      {filters.map((filter, idx) => {
        if (filter.type === "select") {
          return (
            <select
              key={idx}
              value={filter.value}
              onChange={(e) => onChange(filter.id, e.target.value)}
              className="cursor-pointer rounded-xl border border-[var(--line)] bg-transparent px-3 py-2.5 text-xs text-[var(--text)] outline-none transition-colors hover:border-[rgba(106,166,255,0.55)]"
            >
              {filter.options.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          );
        }
        if (filter.type === "input") {
          return (
            <input
              key={idx}
              type="text"
              placeholder={filter.placeholder}
              value={filter.value}
              onChange={(e) => onChange(filter.id, e.target.value)}
              className="rounded-xl border border-[var(--line)] bg-transparent px-3 py-2.5 text-xs text-[var(--text)] outline-none transition-colors hover:border-[rgba(106,166,255,0.55)]"
            />
          );
        }
        return null;
      })}
    </div>
  );
};
