import React from "react";
import { useAtom } from "jotai";
import { CurrentGRNAtom } from "../Variables";
import { useNavigate } from "react-router-dom";

function GRNCard({ GRN }) {
    const [currentGRN, setCurrentGRN] = useAtom(CurrentGRNAtom);
    const navigate = useNavigate();
    return (
        <div
            onClick={() => {
                setCurrentGRN(GRN);
                localStorage.setItem("currentGRN", JSON.stringify(GRN));
                navigate("/grn");
            }}
            className="relative overflow-hidden hover:translate-x-3 cursor-pointer hover:brightness-105 transition-all rounded-xl bg-gray-100  shadow-inner text-primary-700 border border-primary-950/50 mx-0 flex items-center "
        >
            <div className="flex w-full flex-col gap-0.5 py-2 px-3">
                <div className="flex flex-wrap gap-x-3 items-center justify-between">
                    <h5 className="text-sm font-semibold whitespace-nowrap text-primary-950">GRN : {GRN?.GRN}</h5>
                    <h5 className="text-sm font-semibold whitespace-nowrap text-primary-950">Quant : {GRN?.quantity}</h5>
                </div>
                <p className="text-sm text-primary-900 truncate" title={GRN?.supplierName}>
                    Supplier Name : {GRN?.supplierName}
                </p>
                <p className="text-sm text-primary-900 truncate" title={GRN?.buyer}>
                    Buyer : {GRN?.buyer}
                </p>
            </div>
        </div>
    );
}

export default GRNCard;