import React, { useState } from 'react';
import { Switch } from '@headlessui/react';

function classNames(...classes: any) {
  return classes.filter(Boolean).join(' ');
}

export const GeneralTab = () => {
  const [enabled, setEnabled] = useState(false);

  return (
    <div className="py-4">
      <div className="md:grid md:grid-cols-3 md:gap-6">
        <div className="md:col-span-2">
          <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
          <p className="mt-1 text-sm text-gray-500">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
            gravida at orci.
          </p>
        </div>
        <div className="my-auto ml-auto">
          <Switch
            checked={enabled}
            onChange={setEnabled}
            className={classNames(
              enabled ? 'bg-primary-600' : 'bg-gray-200',
              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none',
            )}
          >
            <span
              aria-hidden="true"
              className={classNames(
                enabled ? 'translate-x-5' : 'translate-x-0',
                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
              )}
            />
          </Switch>
        </div>
      </div>
    </div>
  );
};