/**
 * CommonSettingsSectionCompact
 *
 * Compact version of common settings fields for constructor sidebar.
 * Label and appear timing in a space-efficient layout.
 */

import React from 'react';
import type { CommonSettingsSectionProps } from './types';

const CommonSettingsSectionCompact: React.FC<CommonSettingsSectionProps> = ({
  label,
  appearDelaySec,
  appearDurationSec,
  onChange,
  showLabel = true,
}) => {
  return (
    <div className='mb-1.5 space-y-1.5'>
      {showLabel && (
        <div>
          <label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
            Label
          </label>
          <input
            className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
            value={label}
            onChange={(event) => onChange('label', event.target.value)}
          />
        </div>
      )}
      <div>
        <label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
          Appear delay (sec)
        </label>
        <input
          className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
          type='number'
          min='0'
          step='0.1'
          value={appearDelaySec ?? 0}
          onChange={(event) => onChange('appearDelaySec', event.target.value)}
        />
      </div>
      <div>
        <label className='mb-0.5 block text-[10px] font-semibold text-white/80'>
          Appear duration (sec)
        </label>
        <input
          className='w-full rounded border border-gray-300 px-1.5 py-0.5 text-[11px]'
          type='number'
          min='0.1'
          step='0.1'
          placeholder='Unlimited'
          value={appearDurationSec ?? ''}
          onChange={(event) =>
            onChange('appearDurationSec', event.target.value)
          }
        />
        <p className='mt-0.5 text-[10px] text-white/60'>
          Leave empty for unlimited.
        </p>
      </div>
    </div>
  );
};

export default CommonSettingsSectionCompact;