import Image from "next/image";
import Link from "next/link";

import { useTranslation } from "next-i18next";

const CardLeft = ({ title, subtitle, button, image }) => {
  const { t: translate } = useTranslation();

  return (
    <div className="layout py-20 bg-zinc-100">
      <div className="md:flex">
        <div className="md:w-1/2 lg:w-2/5 md:mr-10">
          <Image
            src={image}
            width={800}
            height={320}
            alt={image}
            className="hidden md:block"
          />
        </div>
        <div className="md:w-1/2 lg:w-3/5">
          <p className="font-cooperBold text-4xl mb-4 leading-normal text-center md:text-left">
            {translate(title)}
          </p>
          <p className="mb-4 leading-relaxed">{translate(subtitle)}</p>
          <Link href="/src/pages/resources-archive">
            <button className="bg-red-700 text-white hover:bg-red-800 hover:text-white rounded-md px-3 py-2 text-md font-medium">
              {translate(button)}
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default CardLeft;
