"use client";

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

interface DomainSelectorProps {
  domains: Domain[];
  value: string | null;
  onChange: (domainId: string | null) => void;
  placeholder?: string;
  className?: string;
}

export function DomainSelector({
  domains,
  value,
  onChange,
  placeholder = "Select a domain",
  className = "",
}: DomainSelectorProps): JSX.Element {
  return (
    <select
      value={value ?? ""}
      onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
        onChange(e.target.value || null)
      }
      className={`border rounded px-3 py-2 ${className}`}
      aria-label="Domain selector"
    >
      <option value="">{placeholder}</option>
      {domains.map((domain) => (
        <option key={domain.id} value={domain.id}>
          {domain.icon ? `${domain.icon} ` : ""}
          {domain.name}
        </option>
      ))}
    </select>
  );
}