import cx from 'classnames'
import { m } from 'framer-motion'

import { DEFAULT_SPRING_TRANSITION } from '@/lib/constants'

import ParseContent from '@/components/parsers/ParseContent'
import Button from '@/components/shared/Button'

type Props = {
  heading?: string
  content?: string
  button?: {
    url: string
    title: string
  }
  isSmall?: boolean
  postType?: string
}

export default function Callout({ heading, content, button, postType, isSmall = false }: Props) {
  const isProject = postType === 'project' || postType === 'case_study'

  return (
    <section className={isProject ? 'my-20' : ''}>
      <div className="relative flex flex-col pl-4 sm:pl-8 max-w-screen-md">
        {heading && (
          <h2 className={cx('inline-block -mt-[0.15em] pb-4', isSmall ? 'text-h4' : 'text-h2')}>{heading}</h2>
        )}

        {content && (
          <ParseContent content={content} replaceOptions={isSmall ? { p: { textClass: 'text-body' } } : {}} />
        )}

        {button && (
          <div className="pt-6 mt-auto">
            <Button href={button.url} color="dark">
              {button.title}
            </Button>
          </div>
        )}

        <m.div
          className="absolute top-0 left-0 h-full w-px bg-black origin-top"
          initial={{ opacity: 0, scaleY: 0 }}
          whileInView={{ opacity: 1, scaleY: 1 }}
          viewport={{
            once: true,
            margin: `0px 0px -33% 0px`,
          }}
          transition={DEFAULT_SPRING_TRANSITION}
          aria-hidden
        />
      </div>
    </section>
  )
}