import React from "react";
import styles from "./hero.module.css";
import { Link } from "react-router-dom";

interface PersonalHeroProps {
  heading?: string;
  body?: string;
  buttonLink?: string;
  buttonText?: string;
}
const PersonalHero: React.FC<PersonalHeroProps> = ({
  heading,
  body,
  buttonLink = "#",
  buttonText,
}) => {
  return (
    <div
      className={`w-full max-[28.125rem] relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
    >
      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
          {heading}
        </h1>
        <p className="p-[.3125rem] pr-5 font-medium table w-[25.375rem]">{body}</p>
        <Link to={buttonLink}>
          <button className="bg-[#A6368C] text-white text-[.9375rem] w-[10.9375rem] py-[.4375rem] px-[.625rem]">
            {buttonText} &nbsp;
          </button>
        </Link>
      </div>
    </div>
  );
};

export default PersonalHero;