export function EnvOverrideWarning() {
  return (
    <div className="text-2xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-500/15 border border-amber-100 dark:border-amber-500/30 px-2 py-1 rounded mt-1">
      環境変数で上書きされています（保存しても反映されません）
    </div>
  );
}

export function FieldLabel({ children }: { children: React.ReactNode }) {
  return <label className="block text-2xs font-medium text-slate-600 mb-1">{children}</label>;
}

interface FieldInputProps {
  value: string | number;
  onChange: (value: string) => void;
  type?: 'text' | 'number' | 'password';
  placeholder?: string;
  /** ENV 上書きなどで編集を無効化したい場合に true を渡す */
  disabled?: boolean;
  /** disabled の理由を tooltip として表示 */
  disabledReason?: string;
}

export function FieldInput({ value, onChange, type = 'text', placeholder, disabled, disabledReason }: FieldInputProps) {
  return (
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      disabled={disabled}
      title={disabled ? disabledReason : undefined}
      className={`w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none transition-shadow ${
        disabled ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-canvas'
      }`}
    />
  );
}