buttons.segmentedControl.title

import React, { useState } from 'react';

export const SegmentedControl: React.FC = () => {
  const [selected, setSelected] = useState<'day' | 'week' | 'month'>('day');
  const options: Array<'day' | 'week' | 'month'> = ['day', 'week', 'month'];

  return (
    <div className="segmented-control">
      {options.map((option) => (
        <button
          key={option}
          className={`segmented-control-item ${selected === option ? 'segmented-control-item-active' : ''}`}
          onClick={() => setSelected(option)}
        >
          {option}
        </button>
      ))}
      <div
        className="segmented-control-indicator"
        style={{
          transform: `translateX(${options.indexOf(selected) * 100}%)`
        }}
      />
    </div>
  );
};

.segmented-control {
  display: inline-flex;
  position: relative;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 4px;
}

.segmented-control-indicator {
  position: absolute;
  width: 33.33%;
  height: calc(100% - 8px);
  background: var(--accent-purple);
  border-radius: 8px;
  transition: transform 0.3s ease;
}