/* eslint-disable import/prefer-default-export */
import { Link } from 'react-router-dom'
import { ReactNode } from 'react'
import { IoChevronBack } from 'react-icons/io5'

interface PageHeaderProps {
  backLink: string
  heading: string | ReactNode
  rightComponent?: ReactNode
  backLabel?: string | ReactNode
}

export const PageHeader = (props: PageHeaderProps) => {
  const { backLink, heading, rightComponent, backLabel = 'Back' } = props

  return (
    <div className="flex items-center sticky top-0 bg-base-100 z-50 justify-between gap-4 py-4 border-b border-gray-200">
      <div className="flex items-center gap-4">
        <Link to={backLink} className="text-sm flex gap-2">
          <span>
            <IoChevronBack size={20} />
          </span>
          {backLabel}
        </Link>
        <div className="text-secondary">{heading}</div>
      </div>
      {rightComponent && (
        <div className="flex items-center gap-2">{rightComponent}</div>
      )}
    </div>
  )
}