import PageHeaderCard from '@/components/PageHeaderCard'
import { decodeEmail } from '@/lib/utils'

type HeaderOptions = {
  title: string
  description: string
  img?: {
    src: string
    alt?: string
  }
  owner: {
    name: string
    link: string
  }
  manager: {
    name: string
    mailTo: string
  }
  website: string
}

export function Header({
  title,
  description,
  img,
  owner,
  manager,
  website,
}: HeaderOptions) {
  return (
    <PageHeaderCard title={title} description={description} img={img}>
      <div className="sm:col-span-1 text-left">
        <dt className="text-sm font-medium text-gray-500">Betreiber</dt>
        <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
          <a href={owner.link} target={'_blank'}>
            {owner.name}
          </a>
        </dd>
      </div>
      <div className="sm:col-span-1">
        <dt className="text-sm font-medium text-gray-500">
          Kontakt
        </dt>
        <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
          <a
              target={'_blank'}
              onClick={(e) => {
                window.open(`mailto:${decodeEmail(manager.mailTo)}`, '_blank')
                e.preventDefault()
              }}
          >
            {manager.name ? manager.name : decodeEmail(manager.mailTo).replace('@', '<ät>')}
          </a>
        </dd>
      </div>
      <div className="sm:col-span-1">
        <dt className="text-sm font-medium text-gray-500">Webseite</dt>
        <dd className="ml-0 mt-1 text-sm text-gray-900 hover:cursor-pointer">
          <a href={website} target={'_blank'}>
            {website}
          </a>
        </dd>
      </div>
    </PageHeaderCard>
  )
}