import classnames from 'classnames';

interface LandingPageHeaderProps {
  headerText: string;
}

const LandingPageHeader: React.FC<LandingPageHeaderProps> = ({ headerText }) => {
    
  return (
    <div className="w-full flex justify-start items-end pt-30">
        <div className="w-1/24 h-full flex justify-end">
            <div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
                <div className={classnames(
                    "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl bg-bluetang border-atmosphere"
                    )} />
                <div className={classnames(
                    "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl bg-bluetang border-atmosphere"
                    )} />
            </div>
        </div>
        <div className={`w-11/12 flex flex-col justify-end mb-[14px]`}>
            <div className={classnames(
                "text-5xl text-left ml-10 z-1 text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove text-bronze"
            )}>
                {headerText}
            </div>
            <div className={classnames(
                "w-full h-[6px] rounded-r bg-atmosphere"
                )}>
            </div>
        </div>
    </div>
  );
};

export default LandingPageHeader;