import React from 'react';
import { useMidsummer } from '../../hooks/useMidsummer';

/** 🐸 midsummer theme toggle, rendered among the sidebar tool links. */
export const FrogToggle: React.FC = () => {
  const { enabled, toggle } = useMidsummer();
  return (
    <span
      className="ml-tool-link"
      style={{ cursor: 'pointer' }}
      title={enabled ? 'Turn off the midsummer theme' : 'Turn on the midsummer theme'}
      onClick={toggle}
    >
      🐸 Midsommar {enabled ? 'on' : 'off'}
    </span>
  );
};