import Image from "next/image";

import { useTranslation } from "next-i18next";
import YoutubeEmbed from "./youtubeEmbed";

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

  return (
    <div className="layout py-20">
      <div className="flex">
        <div className="w-1/2 mr-10 lg:w-3/5">
          <p className="font-cooperBold text-4xl mb-4 leading-normal">
            {translate(title)}
          </p>
          <p className="font-inter mb-4 leading-relaxed">
            {translate(subtitle)}
          </p>
        </div>
        <div className="w-1/2 lg:w-2/5">
          {image && <Image src={image} alt={image} />}
          {video && <YoutubeEmbed embedId={video} />}
        </div>
      </div>
    </div>
  );
};

export default Card;
