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

const OPTIONS = [
  { value: 'loose', label: '宽松' },
  { value: 'default', label: '默认' },
  { value: 'compact', label: '紧凑' }
];
const ROWS = [
  { name: '用户管理', count: '128 项' },
  { name: '角色管理', count: '12 项' },
  { name: '菜单管理', count: '36 项' }
];

export default function DensitySwitcher({ value = 'default', onChange }) {
  return (
    <div>
      <div className="aa-densw">
        {OPTIONS.map((o) => (
          <button
            key={o.value}
            className={'aa-densw-opt' + (value === o.value ? ' is-active' : '')}
            onClick={() => onChange && onChange(o.value)}
          >
            {o.label}
          </button>
        ))}
      </div>
      <div className={'aa-densw-demo ' + value}>
        {ROWS.map((r, i) => (
          <div key={i} className="aa-densw-row">
            <span>{r.name}</span>
            <span className="muted">{r.count}</span>
          </div>
        ))}
      </div>
    </div>
  );
}