import React, { useState } from 'react';
import { Switch } from 'antd';

function ToggleContent({ label = '', first, second }) {
  const [switched, setSwitched] = useState(true);
  return (
    <div>
      <div className="flex items-center cursor-pointer mb-4">
        <div className="mr-2" onClick={() => setSwitched(!switched)}>{ label }</div>
        <Switch
          onChange={() => setSwitched(!switched)}
          checked={!switched}
        />
      </div>
      <div>
        { switched ? first : second }
      </div>
    </div>
  );
}

export default ToggleContent;