import HeroLayout from 'components/Sections/Hero/HeroLayout';
import './styles.scss';
import { useSelector } from 'react-redux';
import HeroComponent from './heroComponent';
import { selectLandingPageHero } from 'store/slices/LandingSlice';
import { getImageUrl } from 'helpers';
import { Helmet } from 'react-helmet';
const Hero = ({ isLoading }) => {
const { title, description, button_text, image, button_two_text, button_text_link, button_two_text_link } = useSelector(selectLandingPageHero);
return (
<>
<Helmet
title={title}
meta={[
{ name: "description", content: description },
]}
/>
<HeroLayout image={<img src={getImageUrl(image)} alt="Landing illustration" />} isLoading={isLoading}>
<HeroComponent
title={title}
desc={description}
button_text={button_text}
button_two_text={button_two_text}
hasCrumbs={true}
button_text_link={button_text_link}
button_two_text_link={button_two_text_link}
isLoading={isLoading}
/>
</HeroLayout>
</>
);
};
export default Hero;