import React from 'react'
import { ArrowNarrowLeftIcon } from '@heroicons/react/solid'
import type { Callback } from '../../types'
import '../../tailwind.css'
import { classNames } from '../../utils/css'
export interface HeaderProps {
  /** Page title */
  title?: string
  /** Upward one level navigation */
  upward?: Callback
  /* Aligns the title to the center */
  centerTitle?: boolean
}

const titlesSyles = {
  base: 'w-full text-lg font-semibold leading-normal text-primary-text',
  alignmentCenter: 'text-center',
  alignmentLeft: 'text-left',
}

export const Header = ({ title, upward, centerTitle }: HeaderProps) => {
  const upwardMarkup = upward ? (
    <button
      onClick={upward.onAction}
      className="inline-flex items-center rounded-lg border border-transparent bg-secondary-background p-2 text-primary-text hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
    >
      <ArrowNarrowLeftIcon className="h-5 w-5" aria-hidden="true" />
    </button>
  ) : null

  const titleClass = classNames(
    titlesSyles.base,
    !centerTitle && titlesSyles.alignmentLeft,
    centerTitle && titlesSyles.alignmentCenter,
  )

  return (
    <div className="flex gap-4 items-center">
      <div className='flex flex-none'>{upwardMarkup}</div>
      {title && (
        <div className='w-full flex grow'>
          <div className={titleClass}>
            {title}
          </div>
        </div>
      )}
    </div>
  )
}
