// @flow
import { type StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import { Thead as RsrThead } from 'react-super-responsive-table';
import type { TheadProps } from './t-head.proptypes';
import { bpLarge } from '../../../../breakpoints';

export const Thead: StatelessFunctionalComponent<TheadProps> = styled(
  RsrThead,
).attrs(() => ({
  className: 'PwTHead',
}))`
  @media (max-width: ${bpLarge}) {
    display: block;
  }
`;

Thead.displayName = 'Thead';
