import React from 'react'
import PropTypes from 'prop-types'

import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'
import { CardBase } from '../Card/CardBase'

/**
 * Private subcomponent for use within QuickLinks.
 *
 * Restyled Card with identical behaviour to Card, but themed according to the
 * QuickLinksCard theme rather than the Card theme.
 */
export const QuickLinksCard = React.forwardRef(({ tokens, variant, children }, ref) => {
  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)

  return (
    <CardBase tokens={themeTokens} ref={ref}>
      {children}
    </CardBase>
  )
})

QuickLinksCard.displayName = 'QuickLinksCard'

QuickLinksCard.propTypes = {
  tokens: getTokensPropType('QuickLinksCard'),
  variant: variantProp.propType,
  children: PropTypes.node
}