'use client';

import { Parallax } from 'react-scroll-parallax';
import ResponsiveImage from '@/components/shared/ResponsiveImage';
import Container from '@/components/layout/Container';
import Button from '@/components/base/Button';
import Link from 'next/link';
import Icon from '@/components/base/Icon';


const MasterPlan: React.FC<IMasterPlan> = ({
  title,
  description,
  image,
  button
}: IMasterPlan) => {
  return (
    <section className="my-6">
      <Parallax translateY={[20, -20]}>
        <Container as="header" className="text-center max-w-screen-md mb-2 ">
          <h2 className="text-2xl font-serif mb-2 md:text-4xl">{title}</h2>
          <p className="text-sm font-light md:text-base mb-6">{description}</p>
          {button && (
            <div className="mt-6 mb-4">
              <Button
                as={Link}
                href={button.url}
                color="primary"
                size="lg"
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm tracking-wider px-9"
                startContent={<Icon name="download" />}>
                {button.label}
              </Button>
            </div>
          )}
        </Container>
      </Parallax>
      <div className="relative overflow-hidden">
        <Parallax translateY={[-20, 20]} className="relative overflow-hidden">
          <ResponsiveImage
            src={image.url}
            width={image.width}
            height={image.height}
            sizes="(max-width: 1920px) 100vw, 1920px"
            className="mx-auto max-w-full min-h-60 object-cover"
          />
        </Parallax>
      </div>
    </section>
  );
};

export default MasterPlan;
