import BlogList from '@/app/components/Blog/BlogList/BlogList'
import H1 from '@/app/components/common/H1'
import H2 from '@/app/components/common/H2'
import H5 from '@/app/components/common/H5'
import { FlexBox, SiteBannerSection } from '@/app/components/common/HOC'
import React from 'react'

export const metadata = {
  title: 'Client-Focused Healthcare Blog | FHP',
  description: 'Explore our blog for the latest healthcare trends, recruitment strategies, and insights tailored for clients. | FHP',
  openGraph: {
    images: `${process.env.NEXT_PUBLIC_BASE}/assets/images/ogimages/ClientBlog.png`,
  }
}

const Blog = () => {
  return (
      <>
        <SiteBannerSection>
          <FlexBox className='title-group'>
            <H1 text={'Blog'}/>
            <div className='bg-title-body'><H2 className='bg-title' text={'Blog'}/></div>
            <H5 text={'Stay Informed: Keep Up to Date with Healthcare News and Trends'}/>
          </FlexBox>
        </SiteBannerSection>
        <BlogList />
      </>
  )
}

export default Blog