import React from 'react'

import { PageProps } from './Page.types'

import { handleColor } from './Page.helpers'

import './Page.css'

const Page = ({ children, color, icon, meta, title }: PageProps) => {
  const i: string = 'fa-regular fa-' + icon

  const styles: any = handleColor(color)

  return (
    <div className={`grid ${children ? 'grid-cols-2' : 'grid-cols-1'} mb-4`}>
      <div>
        <h1 className='flex flex-row font-bold items-center space-y-2'>
          {icon && (
            <span
              className={`${styles.bg} flex h-8 items-center justify-center mr-4 p-4 rounded w-8`}
            >
              <i className={`${i} ${styles.text}`} />
            </span>
          )}

          {title}
        </h1>

        {meta && <p className='mt-4 text-slate-700 text-sm'>{meta}</p>}
      </div>
      {children && (
        <div className='flex items-end justify-end space-x-4 w-full'>
          {children}
        </div>
      )}
    </div>
  )
}

export default Page
