import h from '../shared/h.js'
import { Icon } from '../atoms/icon.js'
import { Link } from '../atoms/link.js'
import t from '../shared/t.js'
import { ARROW_TAIL_RIGHT } from '../shared/icons.js'

export function Card ({ children, ...props }) {
  const readMore = t('Read more')

  return h(Link, {
    ...props,
    _style: id => `${id}:hover { transform: translateY(-8px); box-shadow: 0 8px 12px 2px hsla(var(--color-black-bg), 0.2) }`,
    className: 'block bg-bga text-txa rounded-2xl overflow-hidden h-full transition',
    children: h('div', { className: 'bg-bga text-txa h-full rounded-2xl overflow-hidden flex flex-col' },
      h('div', { className: 'grow' }, children),
      h('div', { className: 'flex items-center justify-end pl-6 pr-6 pb-6', 'aria-hidden': true },
        readMore && h('span', { className: 'mr-1 shrink-0' }, readMore),
        h(Icon, { _size: 's', _rtlFlip: true }, ARROW_TAIL_RIGHT)
      )
    )
  })
}
