export default function SettingsPanel({
  resolution,
  setResolution,
  resolutions,
  randomSeed,
  setRandomSeed,
  seed,
  setSeed,
  shift,
  setShift,
  disabled
}) {
  return (
    <details className="bg-white rounded-xl shadow-md">
      <summary className="px-6 py-4 cursor-pointer font-semibold text-slate-700 hover:bg-slate-50 rounded-xl transition-colors">
        ⚙️ Settings
      </summary>
      <div className="px-6 pb-6 space-y-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            Resolution
          </label>
          <select
            value={resolution}
            onChange={(e) => setResolution(e.target.value)}
            disabled={disabled}
            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-slate-50"
          >
            {resolutions.map((res) => (
              <option key={res} value={res}>
                {res}
              </option>
            ))}
          </select>
        </div>

        <div className="flex items-center gap-4">
          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="checkbox"
              checked={randomSeed}
              onChange={(e) => setRandomSeed(e.target.checked)}
              disabled={disabled}
              className="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-primary-500"
            />
            <span className="text-sm font-medium text-slate-700">Random Seed</span>
          </label>

          {!randomSeed && (
            <input
              type="number"
              value={seed}
              onChange={(e) => setSeed(parseInt(e.target.value) || 0)}
              disabled={disabled}
              className="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-slate-50"
              placeholder="Seed"
            />
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            Time Shift: {shift.toFixed(1)}
          </label>
          <input
            type="range"
            min="1.0"
            max="10.0"
            step="0.1"
            value={shift}
            onChange={(e) => setShift(parseFloat(e.target.value))}
            disabled={disabled}
            className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-primary-500"
          />
        </div>
      </div>
    </details>
  );
}