// @flow
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';

import { Th as RsrTh } from 'react-super-responsive-table';
import type { ThProps } from './th.proptypes';
import { getPaletteColor } from '../../../../mixins/branding';
import { bpLarge } from '../../../../breakpoints';
import {
  getCellPaddingMobile,
  getCellPaddingDesktop,
} from '../table.css-rules';

export const Th: StatelessFunctionalComponent<ThProps> = styled(RsrTh)`
  text-align: left;
  padding: ${getCellPaddingDesktop};
  border-bottom: solid 1px ${getPaletteColor('greyscale-light')};
  font-weight: normal;

  @media (max-width: ${bpLarge}) {
    display: block;
    padding: ${getCellPaddingMobile};
  }
`;

Th.displayName = 'Th';
