import styled from 'styled-components';
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';

export const borderColor = '#C8DFD0';
export const darkBorderColor = '#333333';
export const backgroundColor = colours.functional.white;
export const darkBackgroundColor = '#121212';
export const textColor = colours.functional.black;
export const darkTextColor = colours.functional.white;

export const homeTeamColor = { light: '#111111', dark: '#a19c9cff' };
export const awayTeamColor = { light: '#0B7D3E', dark: '#0B7D3E' };

export const maxMDBreakpoint =
  (breakpoints.medium && typeof breakpoints.medium === 'number'
    ? breakpoints.medium
    : 768) - 1;

export const WidgetWrapper = styled.div<{
  isApp: boolean;
  roundedCorners?: boolean;
}>`
  background-color: ${backgroundColor};
  color: ${textColor};
  ${props =>
    props.isApp &&
    `
        @media(prefers-color-scheme: dark) {
          background-color: ${darkBackgroundColor} !important;
          color: ${darkTextColor} !important;
        }
      `} overflow: hidden;
  @media (max-width: ${maxMDBreakpoint}px) {
    border-radius: ${props =>
      props.roundedCorners ? '0px 0px 8px 8px' : '0px'};
  }
  ${props =>
    props.isApp &&
    `
        @media(prefers-color-scheme: dark) {
          border-color: ${darkBorderColor};
        }
      `} h3 {
    text-align: center;
    font-family: ${fonts.headline};
    font-size: 24px;
    font-weight: 800;
    padding-top: 24px;
    padding-bottom: 8px;
    margin: 0;

    @media (max-width: ${maxMDBreakpoint}px) {
      display: none;
    }

    ${props =>
      props.isApp &&
      `
          @media(prefers-color-scheme: dark) {
            color: ${darkTextColor} !important;
          }
        `};
  }
`;