// @flow
import { Tr as RsrTr } from 'react-super-responsive-table';
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';

import type { TrProps } from './tr.proptypes';

import { getPaletteColor } from '../../../../mixins/branding';
import { bpLarge } from '../../../../breakpoints';

export const Tr: StatelessFunctionalComponent<TrProps> = styled(RsrTr)`
  border-bottom: solid 1px ${getPaletteColor('greyscale-light')};
  background-color: ${getPaletteColor('white')};
  word-break: break-word;

  &:last-of-type {
    border-bottom: none;
  }

  @media (max-width: ${bpLarge}) {
    display: block;
    /*
      Hide table headers (but not display: none;, for accessibility)
    */
    .PwTHead & {
      display: block;
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  }
`;

Tr.displayName = 'Tr';
