import React, {useState} from "react";
import { TriangleAlert,X } from "lucide-react";
import { useAuth } from "../AuthContext";

function AlertInactive({affAlert,setAffAlert}) {
  const { user } = useAuth();
  return (
    (affAlert&&(user?.role!=="user")&&(
    <div className="flex flex-col md:flex-row bg-slate-600 w-full md:w-1/2 lg:w-1/3 fixed top-20 right-1 sm:right-4 rounded-lg p-4 md:p-5 items-center gap-4 md:gap-6 shadow-lg opacity-90">
      <button onClick={()=>setAffAlert(false)}className="absolute top-2 right-2 text-white hover:text-gray-300">
        <X/>
      </button>

      <TriangleAlert className="text-red-700 w-12 h-12 md:w-16 md:h-16" />

      <p className="text-sm md:text-base text-white text-center md:text-left">
        Cet objet peut être inactif dû à son manque de données. Vous pouvez le
        rendre inactif en changeant son status.
      </p>
    </div>
    )));
}

export default AlertInactive;