import React, { ReactNode } from 'react'
import { Typography } from '@toptal/picasso'

export interface Props {
  children: ReactNode
  'data-testid'?: string
}

const Subtitle = ({ children, 'data-testid': dataTestId }: Props) => (
  <Typography variant='heading' size='large' data-testid={dataTestId}>
    {children}
  </Typography>
)

Subtitle.displayName = 'Subtitle'

export default Subtitle