Build a Segmented Control

import React, { useState } from 'react';
import SegmentedControl from './src/SegmentedControl';

export default function App() {
  const segments = [
    { label: 'Daily', value: 'daily' },
    { label: 'Weekly', value: 'weekly' },
    { label: 'Monthly', value: 'monthly' },
  ];

  const [selectedPeriod, setSelectedPeriod] = useState('weekly');

  const handlePeriodChange = (value) => {
    setSelectedPeriod(value);
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h1>Segmented Control Demo</h1>
      <p>Select a time period:</p>
      <SegmentedControl
        segments={segments}
        initialValue={selectedPeriod}
        onChange={handlePeriodChange}
      />
      <p style={{ marginTop: '20px', fontSize: '18px' }}>
        Currently selected: <strong>{selectedPeriod}</strong>
      </p>
    </div>
  );
}