import React, { useEffect, useState } from 'react';

const SegmentedControl = ({setFrequency,defultFequency}) => {
const [selected, setSelected] = useState(defultFequency);
useEffect(()=>{
  setFrequency(selected)
},[selected])
  return (
    <div className='text-center mt-6'>
      <div className="d-inline-flex border  rounded-pill overflow-hidden shadow-none">
      <button
        type="button"
        className={`btn px-4 py-2 rounded-0  ${selected === 0 ? 'active btn-secondary text-white' : ''}`}
        onClick={() => setSelected(0)}
      >
        Monthly
      </button>
      <button
        type="button"
        className={`btn px-4 py-2 rounded-0  ${selected === 1? 'active btn-secondary text-white' : ''}`}
        onClick={() => setSelected(1)}
      >
     Quaterly
      </button>
      <button
        type="button"
        className={`btn px-4 py-2 rounded-0  ${selected === 2 ? 'active btn-secondary text-white' : ''}`}
        onClick={() => setSelected(2)}
      >
    Half-Yearly
      </button>

      <button
        type="button"
        className={`btn px-4 py-2 rounded-0  ${selected === 3 ? 'active btn-secondary text-white' : ''}`}
        onClick={() => setSelected(3)}
      >
    Yearly
      </button>
    </div>
    </div>
  );
};

export default SegmentedControl;