"use client"

import styles from '@/components/Classifieds/styles.module.scss'
import { useState } from 'react'
import { SerializedEditorState } from 'lexical'
import { RichText } from '@/components/Text/RichText'

type AdProps = {
  text: SerializedEditorState,
  contact: string
}

export const Ad = ({text, contact}: AdProps) => {

  const [displayContact, setDisplayContact] = useState(false)

  return (
    <>
      <div className={styles.ad} onClick={() => setDisplayContact(!displayContact)}>
        <div className={styles.adText}>
          <RichText data={text} />
        </div>
        {!displayContact &&
          <div className={styles.moreInfo} onClick={() => setDisplayContact(true)}>
            Mehr wissen?
          </div>
        }
        {displayContact &&
          <div className={styles.adContact}>
            Nehmen Sie Kontakt auf: <br/>
            <strong>
              <a
                href={`mailto: ${contact}`}
                onClick={e => e.stopPropagation()}
              >{contact}</a>
            </strong>
          </div>
        }
      </div>
    </>
  )
}