import { useMemo } from 'react';
import { Select } from '@cameleer/design-system';
import styles from './EnvironmentSelector.module.css';

interface EnvironmentSelectorProps {
  environments: string[];
  value: string | undefined;
  onChange: (env: string | undefined) => void;
}

export function EnvironmentSelector({ environments, value, onChange }: EnvironmentSelectorProps) {
  if (environments.length === 0) return null;

  const options = useMemo(
    () => [
      { value: '', label: 'All Envs' },
      ...environments.map((env) => ({ value: env, label: env })),
    ],
    [environments],
  );

  return (
    <Select
      className={styles.select}
      options={options}
      value={value ?? ''}
      onChange={(e) => onChange(e.target.value || undefined)}
    />
  );
}