import React from "react";
import Image from "next/image";
import adjust from "@img/adjust.png";

import PersianNumber from "../../../plugins/PersianNumber";
import FormatJalaliDate from "plugins/FormatJalaliDate/page";
import moment from "jalali-moment";
import { useLocale } from "next-intl";
import FormatJalaliDateEn from "plugins/FormatJalaliDateEn/page";

const CoffeeBrewCard = ({ data, last }) => {
  const today = new Date();
  const locale = useLocale();
  const isRTL = locale === "fa";

  const formattedDate = FormatJalaliDate(data?.logAt, true);
  const formattedDateEn = FormatJalaliDateEn(data?.logAt, true);

  return (
    <div
      className={` rounded-lg p-4 mt-3 ${
        last ? "bg-gray-200  border border-primary-600" : "bg-gray-50"
      } `}
    >
      <div
        className={`flex justify-between ${isRTL ? "rtl" : "ltr ml-[45px]"}`}
      >
        <div>
          <div className="flex">
            <p className="mb-0 text-[11px] font-medium  w-fit px-1  mt-1    ">
              <small className="!text-[10px] text-gray-400">
                <PersianNumber
                  number={isRTL ? formattedDate : formattedDateEn}
                  style={"!text-[10px]"}
                />
              </small>
            </p>

            <div className="bg-gray-300 h-3 w-[1px] mt-[6px]"></div>
            <p className="mb-0 text-[10px] font-medium text-gray-400  w-fit px-1  mt-[6px]    ">
              {isRTL ? (
                <PersianNumber
                  number={moment(data?.logAt).locale("fa").format("HH:mm")}
                  style={"!text-[10px]"}
                />
              ) : (
                <>{moment(data?.logAt).locale("fa").format("HH:mm")}</>
              )}
            </p>
            <div className="bg-gray-300 h-3 w-[1px] mt-[6px]"></div>
            <p className="mb-0 text-[11px] font-medium  w-fit px-1  mt-1   ">
              <small className="!text-[10px] text-gray-400">
                {data?.logBy}{" "}
              </small>
            </p>
          </div>
        </div>
      </div>

      <div className=" mt-2 ltr relative">
        <div className="absolute top-[-15px]">
          <Image src={adjust} className="opacity-50 w-[35px]" />
        </div>

        <div className=" w-full  relative mr-5">
          <p className="mb-0 text-gray-500 text-left pl-[55px] ">
            BCG : {data?.ratio} | OEG : {data?.extractionTime} | ET :{" "}
            {data?.finalYield}
          </p>
        </div>
      </div>
    </div>
  );
};

export default CoffeeBrewCard;