import { useState } from 'react'

import { mdiAlertOutline } from '@mdi/js'
import Icon from '@mdi/react'

interface PDFProps {
  url: string
  form?: boolean
}

const PDF = ({ url, form = false }: PDFProps) => {
  const [error, setError] = useState<boolean>(false)

  return error ? (
    <div role="alert" className="alert alert-warning">
      <Icon path={mdiAlertOutline} className="size-7" />
      <span>
        Could not load PDF, this is common in in-app browsers, try opening this
        page in a regular browser
      </span>
    </div>
  ) : (
    <iframe
      src={url}
      title="PDF"
      content="application/pdf"
      style={{
        width: 'calc(100vw - 1rem)',
        height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
      }}
      className="rounded-xl"
      onError={() => setError(true)}
      onLoad={() => setError(false)}
    />
  )
}

export default PDF