import { useEffect, useState } from 'react';

export const Compatibility = () => {
  const [isSelectorSupported, setIsSelectorSupported] = useState(true);

  useEffect(() => {
    try {
      document.querySelector(':is(#foo)');
      setIsSelectorSupported(true);
    } catch (error) {
      setIsSelectorSupported(false);
    }
  }, []);

  const renderCssSelectorNotSupportMeg = () => {
    return !isSelectorSupported ? (
      <div style={{ borderBottom: '6px solid red' }}>
        <h2>Sorry, we cannot support your browser. This app works best with css where selector supported.</h2>
        <h3>Browser Supports</h3>
        <ul>
          <li>Edge | last 2 versions</li>
          <li>Firefox | last 2 versions</li>
          <li>Chrome | last 2 versions</li>
          <li>Safari | last 2 versions</li>
          <li>Opera | last 2 versions</li>
          <li>Electron | last 2 versions</li>
          <li>QQ Browser | last 2 versions</li>
        </ul>
      </div>
    ) : null;
  };

  return renderCssSelectorNotSupportMeg();
};