import ArrowIcon from "../../icons/ArrowIcon";

type DirectionImageProps = {
  title: string;
  description: string;
  image: string;
};

const DirectionImage = ({ title, description, image }: DirectionImageProps) => {
  return (
    <div className="h-[280px] text-white relative rounded-xl overflow-hidden  after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(158,54,148,0.5)] after:to-[rgba(0,0,0,0.5)] cursor-pointer group">
      <img
        src={image}
        className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
        alt=""
      />
      <div className="absolute flex justify-between  left-0 top-0 z-20 w-full py-8 px-5 text-[22px]">
        <div>{title}</div>
        <ArrowIcon />
      </div>
      <div className="absolute left-0 bottom-0 z-20 py-8 px-5 text-[18px]">
        {description}
      </div>
    </div>
  );
};

export default DirectionImage;
