import { Button } from "@mui/material";
import React from "react";
import MoonP from "@/components/icons/MoonP";
import NotificationP from "@/components/icons/NotificationP";
import SettingP from "@/components/icons/SettingP";
import SearchHeaderP from "@/components/icons/SearchHeaderP";

function Icons() {
  return (
    <div className="flex items-center justify-start gap-[12px]">
      <Button
        className="
                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                    !w-[32px] md:!w-[36px] lg:!w-[40px]
                    !h-[32px] md:!h-[36px] lg:!h-[40px]
                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                "
        variant="outlined"
      >
        <MoonP />
      </Button>
      <Button
        className="
                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                    !w-[32px] md:!w-[36px] lg:!w-[40px]
                    !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                "
        variant="outlined"
      >
        <SearchHeaderP />
      </Button>
      <Button
        className="
                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
                    !w-[32px] md:!w-[36px] lg:!w-[40px]
                    !h-[32px] md:!h-[36px] lg:!h-[40px]
                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                "
        variant="outlined"
      >
        <SettingP />
      </Button>
      <Button
        className="
                    !w-[32px] md:!w-[36px] lg:!w-[40px]
                    !h-[32px] md:!h-[36px] lg:!h-[40px]
                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
                    !p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
                    before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
                    before:!bg-[#D32F2F]
                "
        variant="outlined"
      >
        <NotificationP />
      </Button>
    </div>
  );
}

export default Icons;