PageHeaderCard.tsx

import React, { ReactElement } from 'react'
import { IconBooks } from '@tabler/icons-react'
import LifecyclePicture from '@/components/it-standards/LifecyclePicture'

type HeaderOptions = {
  title: string
  description: string
  img?: {
    src: string
    alt?: string
  }
  status?: string
  children?: ReactElement[]
}

export default ({ title, description, img, status, children }: HeaderOptions) => {
    return (
        <section className="bg-white mt-10 w-full mx-auto relative z-10 lg:pb-32" aria-labelledby="heading">
            <h2 className="sr-only" id="heading">
                {title}
            </h2>
            <div className="flex flex-col bg-white border-r-4">
                <div className="flex-1 relative pt-24 px-6 pb-8 md:px-8">

                    {/* Icon + Title */}
                    <div className="h-32 top-0 p-4 inline-block transform -translate-y-1/2">
                        <header className={'flex justify-between space-x-6 items-center'}>
                            {img && img.src
                                ? (
                                    <img
                                        className={'h-24'}
                                        src={img.src}
                                        alt={img.alt}
                                    />
                                )
                                : (
                                    <IconBooks className='hidden w-24 h-24'/>
                                )}
                            <h1 className="p-5 text-3xl lg:text-5xl tracking-tight text-gray-900 overflow-hidden">
                                {title}
                            </h1>
                        </header>
                    </div>

                    {/* Life cycle phase */}
                    <div className="flex">
                        <LifecyclePicture status = {status} />
                    </div>

                    {/* Detailed description */}
                    <div className="flex flex-col md:flex-row md:items-center">
                        <div
                            className="cms-blog-text text-xl text-gray-800 mt-5 md:flex-1"
                            dangerouslySetInnerHTML={{ __html: description }}
                        />
                    </div>
                </div>
                <div className="p-6 bg-gray-50 rounded-b-lg md:px-8 flex flex-row items-center gap-16">
                    {children}
                </div>
            </div>
        </section>

    )
}