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]
                    !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