import React from 'react';

export const NeoCard = ({ children, className = '', noBorder = false }) => (
  <div className={`bg-slate-900/80 backdrop-blur-sm rounded-none border ${noBorder ? 'border-transparent' : 'border-slate-700'} shadow-lg relative overflow-hidden ${className}`}>
    {!noBorder && (
      <>
        <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan-500/50" />
        <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan-500/50" />
        <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan-500/50" />
        <div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan-500/50" />
      </>
    )}
    {children}
  </div>
);

export const NeoBadge = ({ children, color = 'cyan' }) => {
  const styles = {
    cyan: 'bg-cyan-900/30 text-cyan-400 border-cyan-500/30 shadow-[0_0_10px_rgba(34,211,238,0.2)]',
    pink: 'bg-fuchsia-900/30 text-fuchsia-400 border-fuchsia-500/30 shadow-[0_0_10px_rgba(232,121,249,0.2)]',
    red: 'bg-red-900/30 text-red-400 border-red-500/30',
    amber: 'bg-amber-900/30 text-amber-400 border-amber-500/30',
  };
  return (
    <span className={`px-2 py-1 rounded-none border text-xs font-mono tracking-wider ${styles[color] || styles.cyan}`}>
      {children}
    </span>
  );
};

// Fix #12: Stable slider component — onChange receives raw float, no inline closure needed
export const Slider = ({ label, value, onChange, min, max, step, unit }) => (
  <div className="flex flex-col gap-1 mb-3">
    <label className="flex justify-between text-xs font-mono text-slate-400">
      <span className="uppercase tracking-widest">{label}</span>
      <span className="text-cyan-400">{value}{unit}</span>
    </label>
    <input
      type="range"
      min={min} max={max} step={step}
      value={value}
      onChange={onChange}
      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400"
    />
  </div>
);