import { Trans } from "react-i18next";

interface CardProps {
  icon: string;
  image: string;
  title: string | JSX.Element;
  location: string | JSX.Element;
  handleClick: () => void;
}

function Card({ icon, image, title, location, handleClick }: CardProps) {
  return (
    <div className="rounded-lg overflow-hidden flex flex-col justify-between bg-[#22222A]">
      <div
        className="aspect-video bg-no-repeat bg-center bg-cover"
        style={{ backgroundImage: `url('${image}')` }}
      ></div>
      <div className="p-8 space-y-8">
        <div className="flex items-center space-x-4">
          <img src={icon} alt="" className="w-12 h-12" />
          <div>
            <p className="sm:text-xl font-gilroy">{title}</p>
            <p className="sm:text-base text-sm text-[#ABABBA]">{location}</p>
          </div>
        </div>
        <button
          onClick={handleClick}
          className="px-4 py-2 bg-gradient rounded w-full opacity-90 hover:opacity-100 transition-opacity font-gilroy"
        >
          <Trans i18nKey="button" />
        </button>
      </div>
    </div>
  );
}

export default Card;