/**
 * EffectsSettingsSectionCompact
 *
 * Compact animation and interaction effect settings for the constructor sidebar.
 * Uses smaller inputs and labels to fit in the narrow sidebar.
 */

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

const EffectsSettingsSectionCompact: React.FC<EffectsSettingsSectionProps> = ({
  values,
  onChange,
}) => {
  return (
    <div className='space-y-3'>
      {/* Appear Animation */}
      <div>
        <p className='mb-2 text-[11px] font-semibold text-gray-700'>
          Appear Animation
        </p>
        <div className='grid grid-cols-2 gap-2'>
          <div className='col-span-2'>
            <label className='mb-1 block text-[10px] text-gray-500'>Type</label>
            <select
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.appearAnimation || ''}
              onChange={(e) => onChange('appearAnimation', e.target.value)}
            >
              <option value=''>None</option>
              <option value='fade'>Fade</option>
              <option value='slide-up'>Slide Up</option>
              <option value='slide-down'>Slide Down</option>
              <option value='slide-left'>Slide Left</option>
              <option value='slide-right'>Slide Right</option>
              <option value='scale'>Scale</option>
            </select>
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Duration
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.appearAnimationDuration || ''}
              onChange={(e) =>
                onChange('appearAnimationDuration', e.target.value)
              }
              placeholder='0.3s'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Easing
            </label>
            <select
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.appearAnimationEasing || ''}
              onChange={(e) =>
                onChange('appearAnimationEasing', e.target.value)
              }
            >
              <option value=''>ease</option>
              <option value='linear'>linear</option>
              <option value='ease-in'>ease-in</option>
              <option value='ease-out'>ease-out</option>
              <option value='ease-in-out'>ease-in-out</option>
            </select>
          </div>
        </div>
      </div>

      {/* Hover Effects */}
      <div>
        <p className='mb-2 text-[11px] font-semibold text-gray-700'>
          Hover Effects
        </p>
        <div className='grid grid-cols-2 gap-2'>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Scale
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverScale || ''}
              onChange={(e) => onChange('hoverScale', e.target.value)}
              placeholder='1.05'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Opacity
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverOpacity || ''}
              onChange={(e) => onChange('hoverOpacity', e.target.value)}
              placeholder='0..1'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              BG color
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverBackgroundColor || ''}
              onChange={(e) => onChange('hoverBackgroundColor', e.target.value)}
              placeholder='#B39368'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Text color
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverColor || ''}
              onChange={(e) => onChange('hoverColor', e.target.value)}
              placeholder='#FFFFFF'
            />
          </div>
          <div className='col-span-2'>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Box shadow
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverBoxShadow || ''}
              onChange={(e) => onChange('hoverBoxShadow', e.target.value)}
              placeholder='0 4px 12px rgba(...)'
            />
          </div>
          <div className='col-span-2'>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Transition duration
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.hoverTransitionDuration || ''}
              onChange={(e) =>
                onChange('hoverTransitionDuration', e.target.value)
              }
              placeholder='0.2s'
            />
          </div>
        </div>
      </div>

      {/* Focus Effects */}
      <div>
        <p className='mb-2 text-[11px] font-semibold text-gray-700'>
          Focus Effects
        </p>
        <div className='grid grid-cols-2 gap-2'>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Scale
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.focusScale || ''}
              onChange={(e) => onChange('focusScale', e.target.value)}
              placeholder='1.02'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Opacity
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.focusOpacity || ''}
              onChange={(e) => onChange('focusOpacity', e.target.value)}
              placeholder='0..1'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Outline
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.focusOutline || ''}
              onChange={(e) => onChange('focusOutline', e.target.value)}
              placeholder='2px solid #B39368'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Box shadow
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.focusBoxShadow || ''}
              onChange={(e) => onChange('focusBoxShadow', e.target.value)}
              placeholder='0 0 0 3px rgba(...)'
            />
          </div>
        </div>
      </div>

      {/* Active/Press Effects */}
      <div>
        <p className='mb-2 text-[11px] font-semibold text-gray-700'>
          Active/Press Effects
        </p>
        <div className='grid grid-cols-2 gap-2'>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Scale
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.activeScale || ''}
              onChange={(e) => onChange('activeScale', e.target.value)}
              placeholder='0.95'
            />
          </div>
          <div>
            <label className='mb-1 block text-[10px] text-gray-500'>
              Opacity
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.activeOpacity || ''}
              onChange={(e) => onChange('activeOpacity', e.target.value)}
              placeholder='0..1'
            />
          </div>
          <div className='col-span-2'>
            <label className='mb-1 block text-[10px] text-gray-500'>
              BG color
            </label>
            <input
              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
              value={values.activeBackgroundColor || ''}
              onChange={(e) =>
                onChange('activeBackgroundColor', e.target.value)
              }
              placeholder='#131C22'
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default EffectsSettingsSectionCompact;