import React from 'react';

interface IntroBannerProps {
  children?: React.ReactNode;
  src?: string;
  title?: React.ReactNode;
}

const IntroBanner = ({children, title = 'Placeholder', ...props}: IntroBannerProps) => {
  const {src} = props;
    return (
    <section className={`container py-4`}>
        <div className="d-flex flex-md-row gap-3">
            <div className="banner-logo flex-column shrink-1 col-6 col-sm-5 col-md-4 col-lg-3">
                <img className="img-fluid" src={src} alt={"Intro image."}/>
            </div>
            <div className="flex-grow-1 ps-">
                <h2 className="text-center text-md-start">{title}</h2>
                {children}
            </div>
        </div>
    </section>
  );
};

export default IntroBanner;
export {IntroBanner, IntroBannerProps}