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

interface StreamButton {
  icon: string;
  title: string;
  location: string;
  background: string;
  link: string;
}

function StreamButton({
  icon,
  title,
  location,
  background,
  link,
}: StreamButton) {
  return (
    <>
      <a
        href={link}
        target="_blank"
        className="group relative xl:grid hidden grid-cols-4 gap-4 h-36 border-b border-[#3D425C] cursor-pointer"
      >
        <div className="col-span-2 flex items-center xl:gap-12 gap-6">
          <img src={icon} alt="" />
          <p className="xl:text-2xl text-xl font-gilroy font-medium">{title}</p>
        </div>
        <div className="flex items-center xl:text-base text-sm">
          <p>{location}</p>
        </div>
        <div className="xl:flex hidden items-center justify-between">
          <p>Demo version</p>
          <ArrowIcon />
        </div>
        <div
          className="group-hover:opacity-100 opacity-0 transition-opacity duration-300 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `linear-gradient(90deg, #14161F 1.07%, rgba(20, 22, 31, 0.30) 49.98%, #14161F 98.78%), url(${background})`,
          }}
        >
          <div className="w-full h-full flex flex-col gap-2 justify-center items-center">
            <p className="text-2xl font-gilroy font-medium">Start the demonstration</p>
            <p>{title}</p>
          </div>
        </div>
      </a>

      <div className="xl:hidden grid sm:grid-cols-2 sm:gap-3 gap-6 border-b border-[#3D425C] py-6">
        <div className="flex items-center gap-6">
          <img src={icon} alt="" />
          <div className="">
            <p className="xl:text-2xl text-xl font-gilroy font-medium">
              {title}
            </p>
            <p className="text-sm sm:hidden block">{location}</p>
          </div>
        </div>
        <div className="flex items-center justify-between gap-3">
          <p className="text-sm sm:block hidden">{location}</p>
          <Button icon={<ArrowRightIcon />}>
            <a href={link}>Demo version</a>
          </Button>
        </div>
      </div>
    </>
  );
}

export default StreamButton;