import { FC } from "react";
import MoneyFormat from "../common/money";

type props = {
  reports: any;
};
const ProductReport: FC<props> = ({ reports }) => {
  return (
    <div className="p-3 bg-white mb-1 dark:bg-gray-800">
      <div className="grid gap-2 grid-cols-4">
        <div className="bg-gray-100 rounded-md dark:bg-gray-700 dark:text-gray-400">
          <div className="flex p-3">
            <p className=" mr-1">Stock In</p> :{" "}
            <p className="ml-1 font-semibold">{reports?.stock_in_quantity}</p>
          </div>
        </div>
        <div className="bg-gray-100 rounded-md dark:bg-gray-700 dark:text-gray-400">
          <div className="flex p-3">
            <p className="mr-1">Stock In Amount</p> :{" "}
            <div className="ml-1 font-semibold">
              <MoneyFormat amount={reports.stock_in_total_price} />
            </div>
          </div>
        </div>
        <div className="bg-gray-100 rounded-md dark:bg-gray-700 dark:text-gray-400">
          <div className="flex p-3">
            <p className=" mr-1">Stock Out</p> :{" "}
            <p className="ml-1 font-semibold">{reports?.stock_out_quantity}</p>
          </div>
        </div>
        <div className="bg-gray-100 rounded-md dark:bg-gray-700 dark:text-gray-400">
          <div className="flex p-3">
            <p className=" mr-1">Stock Out Amount</p> :{" "}
            <div className="ml-1 font-semibold">
              <MoneyFormat amount={reports.stock_out_total_price} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductReport;