import { Breadcrumb, Image, Stack } from "react-bootstrap"

interface propsType {
    pagetitle: string,
    breadcrumbMenu: string,
    breadcrumbMenuActive: string
    image: string
}

const PageHeader = (props: propsType) => {
    return (
        <Stack className="pageHeader">
            <Stack className="pageHeader-Image">
                <Image src={props.image} />
            </Stack>
            <Stack className="pageHeader-Bg justify-content-center align-items-center">
                <h1 className="headingone">{props.pagetitle}</h1>
                <Breadcrumb>
                    <Breadcrumb.Item href="/">{props.breadcrumbMenu}</Breadcrumb.Item>
                    <span className="pie mx-2">|</span> 
                    <Breadcrumb.Item active>{props.breadcrumbMenuActive}</Breadcrumb.Item>
                </Breadcrumb>
            </Stack>
        </Stack>
    )
}

export default PageHeader