"use client";
import React from "react";
import { FaLocationDot } from "react-icons/fa6";
import { FaBuilding } from "react-icons/fa";
import { useTranslations } from "next-intl";

type Props = {
  description: string;
  location: string;
  status: string;
};

export default function OurInvestmentBreif({
  description,
  location,
  status,
}: Props) {
  const t = useTranslations();
  return (
    <section className="latest-news container  lg:px-16 px-4 !mb-14 lg:grid grid-cols-[2fr_1fr] gap-6 ">
      <div>
        <h2
          data-aos="fade-down"
          className="my-8  text-4xl font-semibold text-start leading-10"
        >
          {t("project breif")}
        </h2>

        <p
          data-aos="fade-up"
          className=" text-text text-lg font-normal leading-7 text-start"
        >
          {description}
        </p>
      </div>
      <div data-aos="flip-left" className="bg-grey p-6 rounded-xl h-fit mt-4">
        <div className="grid grid-cols-[auto_1fr] items-center">
          <FaLocationDot
            size={50}
            className="mx-4 text-primary border-[1px] border-primary rounded-full p-2"
          />
          <div>
            <p className=" text-sm font-normal leading-6 text-start text-textgrey">
              {t("location")}
            </p>

            <p className=" text-base text-text font-normal leading-6 text-start">
              {location}
            </p>
          </div>
        </div>
        <br />
        <div className="grid grid-cols-[auto_1fr] items-center">
          <FaBuilding
            size={50}
            className="mx-4 text-primary border-[1px] border-primary rounded-full p-2"
          />
          <div>
            <p className=" text-xs font-normal leading-6 text-start text-textgrey">
              {t("status")}
            </p>
            <p className=" text-base text-text font-normal leading-6 text-start">
              {status}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}