import React from 'react'

import { Heading } from '../../Heading/Heading'

import '../../tailwind.css'
export interface CardHeaderProps {
  /* Title content for the card */
  title?: string
  /* Title description for the card */
  description?: string
}

export const CardHeader = ({ title, description }: CardHeaderProps) => {
  const descriptionMarkup = description ? (
    <p className="mt-1 text-sm text-secondary-text">{description}</p>
  ) : null

  return (
    <div className="mb-6">
      <Heading>{title}</Heading>
      {descriptionMarkup}
    </div>
  )
}
