import React from 'react';
import './LayoutSwitcher.css';

const OPTIONS = [
  { value: 'side', label: '侧边布局' },
  { value: 'top', label: '顶部布局' },
  { value: 'mixed', label: '混合布局' }
];

export default function LayoutSwitcher({ value = 'side', onChange }) {
  return (
    <div className="aa-layoutsw">
      {OPTIONS.map((o) => (
        <div
          key={o.value}
          className={'aa-layoutsw-opt' + (value === o.value ? ' is-active' : '')}
          onClick={() => onChange && onChange(o.value)}
        >
          <div className="aa-layoutsw-mini">
            {o.value !== 'side' && <div className="s-top" />}
            <div className="s-body">
              {o.value !== 'top' && <div className="s-side" />}
              <div className="s-main" />
            </div>
          </div>
          <div className="aa-layoutsw-label">{o.label}</div>
        </div>
      ))}
    </div>
  );
}