import { ChevronDown } from 'lucide-react';
import type { Environment } from '../api/queries/admin/environments';
import { envColorVar } from './env-colors';
import styles from './EnvironmentSwitcherButton.module.css';

interface EnvironmentSwitcherButtonProps {
  envs: Environment[];
  value: string | undefined;
  onClick: () => void;
}

export function EnvironmentSwitcherButton({ envs, value, onClick }: EnvironmentSwitcherButtonProps) {
  const current = envs.find((e) => e.slug === value);
  const displayName = current?.displayName ?? value ?? 'Select environment';
  const color = envColorVar(current?.color);

  return (
    <button
      type="button"
      className={styles.button}
      onClick={onClick}
      aria-label="Switch environment"
      aria-haspopup="dialog"
    >
      <span className={styles.dot} style={{ background: color }} aria-hidden />
      <span className={styles.name}>{displayName}</span>
      <ChevronDown size={14} className={styles.chevron} aria-hidden />
    </button>
  );
}