import cx from 'classnames'

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

type Props = {
  heading: string
  button: {
    target: string
    url: string
    title: string
  }
  accentColor: string
}

export default function InlineCta({ heading, button, accentColor }: Props) {
  const isWhite = accentColor === 'white'
  return (
    <div className="flex items-center gap-8 p-8 bg-black">
      <div className="flex-1">
        {isWhite ? (
          <h3 className={cx('text-h12', accentColor && `text-${accentColor}`)}>{heading}</h3>
        ) : (
          <h3 className={cx('text-h12', accentColor && `text-accent-${accentColor}`)}>{heading}</h3>
        )}
      </div>

      {button && (
        <Button href={button.url} color="white" target={button.target}>
          {button.title}
        </Button>
      )}
    </div>
  )
}