/**
 * AccessLevelSelect
 * 
 * Dropdown component for selecting RBAC access levels (n/m/g/a).
 */

import React from 'react';
import { _getAccessLevelOptions, type AccessLevel, getAccessLevelColor } from '../../hooks/useAccessRules';
import { useLanguage } from '../../providers/language/LanguageContext';
import styles from './AccessRules.module.css';

interface AccessLevelSelectProps {
  value: AccessLevel | null;
  onChange: (value: AccessLevel) => void;
  disabled?: boolean;
  label?: string;
  showLabel?: boolean;
  compact?: boolean;
}

export const AccessLevelSelect: React.FC<AccessLevelSelectProps> = ({
  value,
  onChange,
  disabled = false,
  label,
  showLabel = false,
  compact = false,
}) => {
  const { t } = useLanguage();
  const accessLevelOptions = _getAccessLevelOptions(t);
  const currentColor = getAccessLevelColor(value);
  
  return (
    <div className={`${styles.accessLevelSelect} ${compact ? styles.compact : ''}`}>
      {showLabel && label && (
        <label className={styles.accessLevelLabel}>{label}</label>
      )}
      <select
        value={value || 'n'}
        onChange={(e) => onChange(e.target.value as AccessLevel)}
        disabled={disabled}
        className={styles.accessLevelDropdown}
        style={{ 
          borderColor: currentColor,
          color: currentColor,
        }}
      >
        {accessLevelOptions.map(option => (
          <option 
            key={option.value} 
            value={option.value}
            style={{ color: option.color }}
          >
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default AccessLevelSelect;