import React from 'react';
import styled from 'styled-components';

interface Props {
  id: string;
}

const SkipToMain = ({ id }: Props) => {
  return (
    <SkipBtn>
      <a href={`#${id}`}>Scroll To Content</a>
    </SkipBtn>
  );
};

export default SkipToMain;

/* styles */
const SkipBtn = styled.span`
  & button {
    position: absolute;
    top: -1000px;
    left: -1000px;

    &:focus {
      position: relative;
      top: 0;
      left: 0;
    }
  }
`;