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

import v from '../../styles/Variables';

interface Props {
  title: string;
  theme?: string;
}

const UnderlineButton = ({ title, theme = v.colors.dark }: Props) => (
  <Underline aria-hidden="true" theme={theme}>
    {title}
  </Underline>
);

export default UnderlineButton;

/* styles */
const Underline = styled.span`
  color: ${({ theme }) => theme};
  border-bottom: ${({ theme }) => `1px dotted ${theme}`};
  transition: ${v.animate};

  &:hover {
    opacity: 0.7;
  }
`;