import Link from 'next/link'
import cx from 'classnames'

import Container from '@/components/shared/Container'

type Props = {
  heading: string
  link?: {
    url: string
    title: string
  }
  accentColor?: string
  linkColor?: string
}

export default function CallToAction({ heading, link, accentColor, linkColor }: Props) {
  return (
    <section className={cx('py-16 sm:py-20 lg:py-24', accentColor && `bg-accent-${accentColor}`)}>
      <Container>
        <div className="max-w-screen-sm">
          {heading && <h2 className="text-h3 text-black pb-4">{heading}</h2>}
          {link?.url && (
            <Link href={link.url} className="flex items-center group">
              <span
                className={cx(
                  'text-h3 pb-[10px] border-b group-hover:border-b-transparent',
                  linkColor && `text-accent-${linkColor}`,
                  linkColor && `border-accent-${linkColor}`
                )}
              >
                {link?.title ?? `Get Started`}
              </span>
              <span
                aria-hidden
                className={cx(
                  "flex items-center w-[40px] h-full ml-[20px] relative transition transition-all before:w-0 before:h-px before:opacity-0 after:border-l-[25px] after:border-y-[25px] after:border-y-transparent after:border-solid after:opacity-0 group-hover:w-[175px] group-hover:before:w-full group-hover:before:opacity-100 group-hover:after:translate-x-0 group-hover:after:-translate-y-2/4 group-hover:after:left-auto group-hover:after:right-0 group-hover:after:opacity-100 before:content-[''] before:absolute before:origin-center before:-translate-y-2/4 before:transition-all before:duration-[0.2s] before:ease-[ease-in-out] before:top-2/4 after:content-[''] after:absolute after:origin-center after:translate-x-2/4 after:-translate-y-2/4 after:transition-all after:duration-[0.2s] after:ease-[ease-in-out] after:right-2/4 after:top-2/4",
                  linkColor && `before:bg-accent-${linkColor}`,
                  linkColor && `after:border-accent-${linkColor}`
                )}
              />
            </Link>
          )}
        </div>
      </Container>
    </section>
  )
}

CallToAction.defaultProps = {
  linkColor: 'blue',
}