/**
 * CommonSettingsSection
 *
 * Common settings fields shared by all element types.
 * Label, position, and appear timing.
 */

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

const CommonSettingsSection: React.FC<CommonSettingsSectionProps> = ({
  label,
  xPercent,
  yPercent,
  appearDelaySec,
  appearDurationSec,
  onChange,
  showLabel = true,
  showPosition = true,
}) => {
  return (
    <div className='space-y-4'>
      {showLabel && (
        <FormField label='Label'>
          <input
            value={label}
            onChange={(event) => onChange('label', event.target.value)}
          />
        </FormField>
      )}

      {showPosition && (
        <div className='grid gap-4 md:grid-cols-2'>
          <FormField label='X percent'>
            <input
              value={xPercent}
              onChange={(event) => onChange('xPercent', event.target.value)}
            />
          </FormField>
          <FormField label='Y percent'>
            <input
              value={yPercent}
              onChange={(event) => onChange('yPercent', event.target.value)}
            />
          </FormField>
        </div>
      )}

      <div className='grid gap-4 md:grid-cols-2'>
        <FormField label='Appear delay (sec)'>
          <input
            value={appearDelaySec}
            onChange={(event) => onChange('appearDelaySec', event.target.value)}
          />
        </FormField>
        <FormField label='Appear duration (sec)'>
          <input
            value={appearDurationSec}
            onChange={(event) =>
              onChange('appearDurationSec', event.target.value)
            }
            placeholder='Leave empty for none'
          />
        </FormField>
      </div>
    </div>
  );
};

export default CommonSettingsSection;