/**
 * سوییچ کشویی «نمایش جدولی / زمانبندی» — بازسازی `TurnsViewModeToggle.jsx` طرح
 * tauri (کادر ۱۹۳×۴۸، پس‌زمینهٔ لغزنده، متن فعال #5559ce).
 */
export type TurnsViewMode = 'table' | 'timeline';

export default function TurnsViewToggle({
  viewMode, onChange,
}: {
  viewMode: TurnsViewMode;
  onChange: (m: TurnsViewMode) => void;
}) {
  const activeText = 'var(--primary)';
  const idleText = 'var(--text-3)';
  return (
    <div style={{
      position: 'relative', width: 193, height: 44, display: 'flex', overflow: 'hidden',
      border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', background: 'var(--surface)',
    }}>
      {/* پس‌زمینهٔ لغزنده */}
      <div style={{
        position: 'absolute', top: 0, right: 0, height: '100%', width: '50%',
        background: 'var(--primary-soft)', transition: 'transform .3s var(--ease)',
        transform: viewMode === 'table' ? 'translateX(100%)' : 'translateX(0%)',
      }} />
      <button
        type="button"
        onClick={() => onChange('table')}
        style={{
          position: 'relative', zIndex: 1, width: '50%', height: '100%', border: 'none',
          background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 13, fontWeight: 500, color: viewMode === 'table' ? activeText : idleText,
        }}
      >
        نمایش جدولی
      </button>
      <div style={{ position: 'relative', zIndex: 1, width: 1, height: '100%', background: 'var(--border)' }} />
      <button
        type="button"
        onClick={() => onChange('timeline')}
        style={{
          position: 'relative', zIndex: 1, width: '50%', height: '100%', border: 'none',
          background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
          fontSize: 13, fontWeight: 500, color: viewMode === 'timeline' ? activeText : idleText,
        }}
      >
        زمانبندی
      </button>
    </div>
  );
}