// @flow
import styled from 'styled-components';

import { getPaletteColor } from '../../../../mixins/branding';
import { getFontSize, getFontFamily } from '../../../../mixins/typography';
import { UnstyledButton } from '../../../behaviors';
import { Span } from '../../../typography/span';
import {
  getSearchResultPadding,
  getSearchResultColor,
  getSearchResultBackground,
} from './clickable-search-result.css-rules';

export const DefaultSearchResult = styled(Span).attrs(
  ({ bold = true, large }) => ({
    fontSize: large ? 'f2' : 'f1',
    bold: bold ? 'true' : large,
  }),
)`
  color: ${getSearchResultColor};
  background: ${getSearchResultBackground};
  display: block;
  padding: ${getSearchResultPadding};
  /* Chevron not even on the right side - hack to deal w/ it */
  padding-right: 24px;
  width: 100%;
  text-align: left;
  font-size: ${getFontSize};
  font-family: ${getFontFamily};

  &:hover,
  &:focus,
  &:active {
    background: ${getPaletteColor('brand-secondary-fg')};
    color: ${getPaletteColor('white')};
  }
`;

export const ClickableSearchResult = styled(UnstyledButton).attrs(
  ({ type = 'button' }) => ({
    type,
  }),
)`
  display: block;
  width: 100%;
`;
