import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';

const Button = ({
  text,
  link,
  color,
  background,
  hoverColor,
  hoverBackground,
}) => (
  <Link href={link} prefetch>
    <a>
      {text}
      <style jsx>{`
        a {
          margin: 3rem 0 0 0;
          color: ${color};
          display: inline-flex;
          width: 20rem;
          height: 5rem;
          font-size: 1.2rem;
          text-transform: uppercase;
          text-decoration: none;
          cursor: pointer;
          text-align: center;
          user-select: none;
          position: relative;
          background: ${background};
          border-width: 0.2rem;
          border-style: solid;
          border-color: ${background};
          border-image: initial;
          overflow: hidden;
          transition: border 200ms, background 200ms, color 200ms ease-out;
          border-radius: 0.5rem;
          justify-content: center;
          align-items: center;
        }
        a:hover {
          color: ${hoverColor};
          border-color: ${hoverColor};
          border-image: initial;
          background: ${hoverBackground};
        }
      `}</style>
    </a>
  </Link>
);

Button.defaultProps = {
  color: 'white',
  background: 'black',
  hoverColor: 'white',
  hoverBackground: 'transparent',
};
Button.propTypes = {
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  link: PropTypes.string.isRequired,
  color: PropTypes.string,
  background: PropTypes.string,
  hoverColor: PropTypes.string,
  hoverBackground: PropTypes.string,
};

export default Button;

@@ -90,198 +90,78 @@
 k';%0A
-%0Aconst Button = (%7B%0A  text,%0A  link,%0A  color,%0A  background,%0A  hoverColor,%0A  hoverBackground,%0A%7D) =%3E (%0A  %3CLink href=%7Blink%7D prefetch%3E%0A    %3Ca%3E%0A      %7Btext%7D%0A      %3Cstyle jsx%3E%7B%60%0A        a %7B%0A        
+import styled from 'styled-components';%0A%0Aconst StyledLink = styled.a%60%0A
   ma
@@ -178,24 +178,16 @@
  0 0 0;%0A
-        
   color:
@@ -193,16 +193,31 @@
 : $%7B
+props =%3E props.
 color%7D;%0A
     
@@ -212,24 +212,16 @@
 color%7D;%0A
-        
   displa
@@ -236,24 +236,16 @@
 e-flex;%0A
-        
   width:
@@ -252,24 +252,16 @@
  20rem;%0A
-        
   height
@@ -268,24 +268,16 @@
 : 5rem;%0A
-        
   font-s
@@ -289,24 +289,16 @@
 1.2rem;%0A
-        
   text-t
@@ -318,24 +318,16 @@
 ercase;%0A
-        
   text-d
@@ -343,24 +343,16 @@
 : none;%0A
-        
   cursor
@@ -362,24 +362,16 @@
 ointer;%0A
-        
   text-a
@@ -384,24 +384,16 @@
 center;%0A
-        
   user-s
@@ -405,24 +405,16 @@
 : none;%0A
-        
   positi
@@ -427,24 +427,16 @@
 lative;%0A
-        
   backgr
@@ -439,24 +439,39 @@
 ckground: $%7B
+props =%3E props.
 background%7D;
@@ -467,32 +467,24 @@
 ackground%7D;%0A
-        
   border-wid
@@ -495,24 +495,16 @@
 0.2rem;%0A
-        
   border
@@ -518,24 +518,16 @@
  solid;%0A
-        
   border
@@ -536,16 +536,31 @@
 olor: $%7B
+props =%3E props.
 backgrou
@@ -564,24 +564,16 @@
 round%7D;%0A
-        
   border
@@ -589,24 +589,16 @@
 nitial;%0A
-        
   overfl
@@ -609,24 +609,16 @@
 hidden;%0A
-        
   transi
@@ -677,24 +677,16 @@
 se-out;%0A
-        
   border
@@ -702,24 +702,16 @@
 0.5rem;%0A
-        
   justif
@@ -729,24 +729,16 @@
 center;%0A
-        
   align-
@@ -756,27 +756,12 @@
 er;%0A
-        %7D%0A        a
+%0A  &
 :hov
@@ -765,22 +765,16 @@
 hover %7B%0A
-      
     colo
@@ -770,32 +770,47 @@
  %7B%0A    color: $%7B
+props =%3E props.
 hoverColor%7D;%0A   
@@ -798,38 +798,32 @@
 ps.hoverColor%7D;%0A
-      
     border-color
@@ -822,24 +822,39 @@
 er-color: $%7B
+props =%3E props.
 hoverColor%7D;
@@ -854,22 +854,16 @@
 Color%7D;%0A
-      
     bord
@@ -881,22 +881,16 @@
 nitial;%0A
-      
     back
@@ -899,16 +899,31 @@
 ound: $%7B
+props =%3E props.
 hoverBac
@@ -938,40 +938,322 @@
 ;%0A  
-      %7D%0A      %60%7D%3C/style%3E%0A    %3C/a
+%7D%0A%60;%0A%0Aconst Button = (%7B%0A  text,%0A  link,%0A  color,%0A  background,%0A  hoverColor,%0A  hoverBackground,%0A%7D) =%3E (%0A  %3CLink href=%7Blink%7D prefetch passHref%3E%0A    %3CStyledLink%0A      background=%7Bbackground%7D%0A      hoverBackground=%7BhoverBackground%7D%0A      hoverColor=%7BhoverColor%7D%0A      color=%7Bcolor%7D%0A    %3E%0A      %7Btext%7D%0A    %3C/StyledLink
 %3E%0A  

convert Button to styled-components