import React from "react";
import tw, {styled} from "twin.macro"
 

let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)

export default Card;

export function CardHeader(props) {
  return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
    <div tw="flex flex-wrap items-center">
      <div tw="relative w-full max-w-full flex-grow flex-1">
        { props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}        
      </div>
      {props.children}
    </div>
  </div>;
}