Masud H.

import React , { useState, useEffect, useContext } from 'react';
import { Button } from "@relume_io/relume-ui";
import Filestack from "../../components/Builder/Filestack.js";
import ScrollAnimation from "react-animate-on-scroll";

const Header = (props) => {
  const { heading, description, buttons, images } = {
    ...Header78Defaults,
    ...props,
  };
  return (
    <header className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container flex flex-col items-center">
        <ScrollAnimation animateIn={"fadeIn"} delay={200}>
          <div className="mb-12 max-w-4xl text-center md:mb-18 lg:mb-20">
            <h1 className="mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-7xl header-title">{props.header}</h1>
            <p className="md:text-md header-description">{props.subheader}</p>
            <div className="mt-6 flex items-center justify-center gap-x-4 md:mt-8">
              {buttons.map((button, index) => (
                <Button key={index} {...button} className="header-button">
                  {button.title}
                </Button>
              ))}
            </div>
          </div>
        </ScrollAnimation>

        <div className="flex w-screen justify-start overflow-hidden">
          <div className="grid shrink-0 grid-cols-1 gap-y-4">
            <div className="grid w-full animate-marquee-top auto-cols-fr grid-cols-2 gap-4 self-center">
              <div className="grid w-full grid-flow-col gap-4">
                {props.images.map((image, imageIndex) => (
                  <ScrollAnimation animateIn={"fadeIn"} delay={imageIndex * 200}>
                    <div
                      key={imageIndex}
                      className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
                    >
                      <img
                        className="absolute inset-0 h-full w-full object-cover"
                        src={image.src}
                        alt={image.alt}
                      />
                    </div>
                  </ScrollAnimation>
                ))}
              </div>
            </div>
            {/* <div className="grid w-full animate-marquee-bottom grid-cols-2 gap-4 self-center">
              {[...new Array(2)].map((e, index) => (
                <div key={index} className="grid w-full grid-flow-col gap-4">
                  {images.map((image, imageIndex) => (
                    <div
                      key={imageIndex}
                      className="relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]"
                    >
                      <img
                        className="absolute inset-0 h-full w-full object-cover"
                        src={image.src}
                        alt={image.alt}
                      />
                    </div>
                  ))}
                </div>
              ))}
            </div> */}
          </div>
        </div>
      </div>
    </header>
  );
};

Header.displayName = "Header";

// export { Header78, Header78Defaults };
export default Header


const Header78Defaults = {
  heading: "Medium length hero heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  buttons: [{ title: "Get started" }]
};

Header.fields = {
  image_link: {
    type: "custom",
    label: "Logo",
    render: ({ name, onChange, value }) => (
      <Filestack name={name} onChange={onChange} value={value} />
    ),
  },
  header: {
    type: "text",
    label: "Header"
  },
  subheader: {
    type: "text",
    label: "Subheading"
  },
  images: {
    type: "array",
    arrayFields: {
      src: { 
        type: "custom",
        render: ({ name, onChange, value }) => (
          <Filestack label="Portfolio image" name={name} onChange={onChange} value={value} />
        ),
      }
    },
    defaultItemProps: {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg"
    },
  },
  logos: {
    type: "array",
    arrayFields: {
      src: {
        type: "text"
      },
    }
  }
}

Header.defaultProps = {
  header: "Webflow producitzed services",
  subheader: "Delivering the best results possible faster than you can think!",
  images: [
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 1",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 2",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 3",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 4",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 5",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 6",
    },
  ],
  logos: [
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 1",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 2",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 3",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 4",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 5",
    },
    {
      src: "https://relume-assets.s3.amazonaws.com/placeholder-image.svg",
      alt: "Placeholder image 6",
    },
  ],
}