buttons.buttonGroup.title

import React, { useState } from 'react';

export const ButtonGroup: React.FC = () => {
  const [selected, setSelected] = useState<'left' | 'center' | 'right'>('left');

  return (
    <div className="button-group">
      <button
        className={`button-group-item ${selected === 'left' ? 'button-group-item-active' : ''}`}
        onClick={() => setSelected('left')}
      >
        Left
      </button>
      <button
        className={`button-group-item ${selected === 'center' ? 'button-group-item-active' : ''}`}
        onClick={() => setSelected('center')}
      >
        Center
      </button>
      <button
        className={`button-group-item ${selected === 'right' ? 'button-group-item-active' : ''}`}
        onClick={() => setSelected('right')}
      >
        Right
      </button>
    </div>
  );
};

.button-group {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

.button-group-item {
  padding: 12px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-group-item-active {
  background: var(--accent-purple);
  color: white;
}