import React, { FC, ReactNode } from 'react'

import { formatClassList, joinStrings } from '../../utils'

type VerticalCardTypes = {
  children: ReactNode,
  className: string,
  [other:string]: unknown
}

const CARD: string = `
  bg-white
  flex
  flex-wrap
  font-normal
  font-sans
  lg:rounded-lg
  max-w-xs
  mx-2
  my-2
  outline-none
  rounded-md
  shadow-md
  tracking-wider
`

const VerticalCard:FC<VerticalCardTypes> = ({
  children,
  className,
  ...other
}: VerticalCardTypes) => {
  const classList = formatClassList(
    className
      ? joinStrings(' ', CARD, className)
      : CARD
  )

  return (
    <div
      className={classList}
      {...other}
    >
      {children}
    </div>
  )
}

export default VerticalCard