import cx from 'classnames'

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

type Props = {
  companyName: string
  companyTitle: string
  quoteText: string
  fullName: string
  button?: {
    url: string
    title: string
  }
  accentColor?: string
}

export default function PullQuote({ companyName, companyTitle, quoteText, fullName, button, accentColor }: Props) {
  return (
    <section>
      <Icon name="quote" className={cx('w-24', accentColor && `text-accent-${accentColor}`)} />

      <p className="pt-4 text-pull-quote">{quoteText}</p>

      <div className="flex max-sm:flex-col pt-12">
        <div className="flex-1">
          <p className="text-pull-quote-name">{fullName}</p>

          <p className="pt-2 text-body">
            {companyTitle}
            <br />
            {companyName}
          </p>
        </div>

        {button && (
          <div className="max-sm:pt-6">
            <Button href={button.url} color="dark">
              {button.title}
            </Button>
          </div>
        )}
      </div>
    </section>
  )
}