import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";

const Hero = () => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    // Check if the hero has been dismissed
    const heroDismissed = Cookies.get("heroDismissed") === "true";
    if (heroDismissed) {
      setIsVisible(false);
    }
  }, []);

  const handleDismiss = () => {
    setIsVisible(false);
    Cookies.set("heroDismissed", "true", { expires: 7 }); // Set cookie for 7 days
  };

  if (!isVisible) {
    return null; // Don't render the component if it's dismissed
  }

  return (
    <section className="bg-white p-8 rounded-lg shadow text-center mb-8 relative">
      <button
        onClick={handleDismiss}
        className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
        aria-label="Dismiss"
      >
        &times; {/* Dismiss icon (×) */}
      </button>
      <h2 className="text-4xl font-semibold mb-4">
        No Ads, No Paywall, No Bullshit
      </h2>
      <p className="text-lg text-gray-700">
        Stay informed without any interruptions. Enjoy unbiased, data-driven
        news coverage with Headlines.
      </p>
      <br />
      <a href="#" className="hover:underline">
        Learn more
      </a>
    </section>
  );
};

export default Hero;
