"use client";

import { useRouter } from "next/navigation";

import { ImageParallax } from "../effects/ImageParallax";

interface BlogCardProps {
  title: string;
  imageSource: string;
  date: string;
  link: string;
}
const BlogCard = ({ title, imageSource, date, link }: BlogCardProps) => {
  const router = useRouter();

  const handleClick = () => {
    router.push(link || "/news");
  };

  return (
    <div className="bg-[#F8F8F8] mx-auto px-2 py-2 max-w-[400px] xl:max-w-[350px] md:min-w-[300px] md:w-full md:max-w-[440px] lg:w-[320px] xl:w-[384px] 2xl:w-[440px] h-full flex flex-col xl:scale-90 2xl:scale-100">
      <div className="relative w-full overflow-hidden">
        <ImageParallax
          start="top 70%"
          end="bottom 30%"
          speed={0.3}
          direction="up"
          height={400}
          width={300}
          src={imageSource}
          alt="articles"
          containerClassName="w-full h-full object-cover aspect-[5/7]"
          className="w-full h-full object-cover aspect-[5/7]"
          imageClassName="w-full h-full object-cover aspect-[5/7]"
        />
      </div>
      <div className="flex-1 flex flex-col">
        <p className="font-creato font-light text-[18px] leading-[100%] tracking-[0] text-[#28241E] py-4">
          {date}
        </p>
        <p className="font-creato font-base text-[20px] leading-relaxed tracking-[0] text-[#28241E] pb-4 break-words flex-1">
          {title}
        </p>
      </div>

      <button
        className="group flex items-center gap-2 -ml-4 text-[#28241E] px-4 py-2 rounded overflow-hidden cursor-pointer mt-auto"
        onClick={handleClick}
      >
        <span className="text-[16px] font-normal font-creato">Learn More</span>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/icons/arrow-narrow-right.svg"
          alt="arrow"
          className="w-5 h-5 transform translate-x-[-14px] opacity-0 transition-all duration-300 ease-out group-hover:translate-x-0 group-hover:opacity-100"
        />
      </button>
    </div>
  );
};

export default BlogCard;