mini-erp/mini-frontend/src/components/ui/SelectField.tsx

import StatusBadge from "./StatusBadge";
import { getStatusColors } from "../../utils/statusColors";

interface SelectFieldProps {
  options: Record<string, string>;
  value?: string;
  onChange: (value: string) => void;
  label?: string;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  statusColorsKey?: string;
}

export default function SelectField({
  options,
  value,
  onChange,
  label,
  placeholder,
  disabled,
  className = "",
  statusColorsKey,
}: SelectFieldProps) {
  const colors = statusColorsKey ? getStatusColors(statusColorsKey, value) : null;
  const selectedLabel = value ? (options[value] ?? value) : "";
  return (
    <div className={className}>
      {label && (
        <label className="block text-[var(--color-text-muted)] font-medium mb-1">
          {label}
        </label>
      )}
      <select
        value={String(value ?? "")}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        className="w-full px-2 py-1 h-[28px] border border-[var(--color-input-border)] bg-white rounded-none outline-none focus:border-[var(--color-input-focus)] disabled:opacity-50 text-xs"
      >
        {placeholder && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {Object.entries(options).map(([key, label]) => (
          <option key={key} value={key}>
            {label}
          </option>
        ))}
      </select>
      {colors && selectedLabel && (
        <div className="mt-1">
          <StatusBadge label={selectedLabel} {...colors} />
        </div>
      )}
    </div>
  );
}