import React, { Children } from 'react'

import { CardHeader } from './components/CardHeader'
import '../tailwind.css'

export interface CardProps {
  /* Title content for the card */
  title?: string
  /* Title description for the card */
  description?: string
  /* Inner content of the element */
  children?: React.ReactNode
}

export const Card = ({ children, title, description }: CardProps) => {
  const headerMarkup = title ? (
    <CardHeader title={title} description={description} />
  ) : null

  const contentMarkup = (
    <div className="text-sm">
      {Children.map(children, (child) => (child ? child : null))}
    </div>
  )

  return (
    <div className="w-full rounded-lg border border-primary-border bg-white  p-6">
      {headerMarkup}
      {contentMarkup}
    </div>
  )
}
