import React from 'react';
import { DotsVerticalIcon, ReloadIcon } from '@radix-ui/react-icons';
import { Typo } from '../atoms/typo';
import { Code } from '../atoms/code';
import { Kbd } from '../atoms/kbd';
import { Flex } from '../atoms/flex';

function CodeSize3(props: { children: React.ReactNode }): React.ReactElement {
  return (
    <Code
      style={{
        display: 'inline-flex',
        justifyItems: 'center',
        alignItems: 'center',
      }}
    >
      {props.children}
    </Code>
  );
}

export function ForceRefresh(): React.ReactElement {
  return (
    <Flex direction="column" gap="2">
      <Typo>
        1. 크롬 브라우저 오른쪽 상단의{' '}
        <CodeSize3>
          <DotsVerticalIcon height="13px" />
          더보기
        </CodeSize3>
        아이콘을 클릭합니다.
      </Typo>
      <Typo>
        2. <CodeSize3>도구 더보기</CodeSize3> {'>'}{' '}
        <CodeSize3>개발자 도구</CodeSize3> 메뉴를 선택합니다. (또는 아래의
        단축키를 사용 할 수 있습니다.)
      </Typo>
      <Flex direction="column" gap="3" p="0" pl="3">
        <Typo>
          a. 윈도우 단축키: <Kbd>F12</Kbd>
        </Typo>
        <Typo>
          b. 맥 단축키: <Kbd>Option</Kbd> + <Kbd>Command</Kbd> + <Kbd>I</Kbd>
        </Typo>
      </Flex>

      <Typo>
        3. 개발자 도구가 열리면, 브라우저 상단에 있는{' '}
        <CodeSize3>
          <ReloadIcon style={{ paddingRight: '5px' }} />
          새로고침 버튼
        </CodeSize3>
        을 우클릭합니다.
      </Typo>

      <Typo>
        4. 새로고침 메뉴에서 <CodeSize3>캐시 비우기 및 강력 새로고침</CodeSize3>
        을 클릭합니다.
      </Typo>
    </Flex>
  );
}
