import styles from './styles.module.css'
import { Container } from '@/components/Container/Container'
import classNames from 'classnames'
import { faustina } from '@/app/fonts'
import Image from 'next/image'
import quote from './quotes.svg'

type TestimonyProps = {
  name: string
  testimony: string
  occupation?: string
}

export const Testimony = ({ name, testimony, occupation }: TestimonyProps) => {
  return (
    <Container>
      <div className={styles.testimony}>
        <div className={styles.container}>
          <Image
            src={quote}
            alt={'Quote'}
            width={100}
            className={classNames(styles.quote, styles.slidein)}
          />
          <p className={classNames(styles.testimonyText, faustina.className)}>
            {testimony}
          </p>
          <p className={styles.name}>
            {name} {occupation && <>- {occupation}</>}
          </p>
        </div>
      </div>
    </Container>
  )
}