"use client";

import type { Domain } from "@mosaic/shared";

interface DomainFilterProps {
  domains: Domain[];
  selectedDomain: string | null;
  onFilterChange: (domainId: string | null) => void;
}

export function DomainFilter({
  domains,
  selectedDomain,
  onFilterChange,
}: DomainFilterProps): React.ReactElement {
  return (
    <div className="flex gap-2 flex-wrap">
      <button
        onClick={() => {
          onFilterChange(null);
        }}
        className={`px-3 py-1 rounded-full text-sm ${
          selectedDomain === null
            ? "bg-gray-900 text-white"
            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
        }`}
        aria-label="Show all domains"
        aria-pressed={selectedDomain === null}
      >
        All
      </button>
      {domains.map((domain) => (
        <button
          key={domain.id}
          onClick={() => {
            onFilterChange(domain.id);
          }}
          className={`px-3 py-1 rounded-full text-sm flex items-center gap-1 ${
            selectedDomain === domain.id
              ? "text-white"
              : "bg-gray-100 text-gray-700 hover:bg-gray-200"
          }`}
          style={{
            backgroundColor: selectedDomain === domain.id ? (domain.color ?? "#374151") : undefined,
          }}
          aria-label={`Filter by ${domain.name}`}
          aria-pressed={selectedDomain === domain.id}
        >
          {domain.icon && <span>{domain.icon}</span>}
          <span>{domain.name}</span>
        </button>
      ))}
    </div>
  );
}
