import { condensedFont, montserratFont } from '@/app/layout';
import ButtonLink from '@/components/UI/ButtonLink';
import { IconBrandOkRu, IconBrandTelegram, IconBrandVk, IconMail, IconPhone } from '@tabler/icons-react';

export const revalidate = 60;

const BannerCompact = () => {
    return (
        <section className="p-2 relative w-full bg-white min-h-14 h-min flex justify-center">
            <div className='w-full max-w-5xl space-y-2 sm:space-y-0 flex flex-col sm:flex-row justify-between items-center'>
                <div className='flex flex-col sm:flex-row grow flex-wrap'>
                    <a role="button" className={`btn btn-ghost flex justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href={'/'}>
                        <span className="justify-self-start w-4 h-4 flex justify-center items-center"><IconPhone /></span>
                        Единый номер +7 (924) 461-23-13
                    </a>

                    <a role="button" className={`btn btn-ghost flex justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href='mailto:uorodok@jkhsakha.ru'>
                        <span className="justify-self-start w-4 h-4 flex justify-center items-center"><IconMail /></span>
                        uordok@jkhsakha.ru
                    </a>

                    <a role="button" className={`btn btn-ghost sm:btn-wide max-w-96 w-fit text-left justify-start text-xs text-[#0063A7] visited:text-[#0063A7] ${montserratFont.className}`} href={'/'}>
                        <span className="justify-self-start w-4 h-4 flex justify-center items-center">
                            <IconPhone />
                        </span>
                        «Телефон доверия» по вопросам противодействия коррупции +7 924-461-28-27
                    </a>

                </div>

                <div className='flex flex-row space-x-2'>
                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
                        <span className="justify-self-start flex justify-center items-center">
                            <IconBrandTelegram />
                        </span>
                    </a>
                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
                        <span className="justify-self-start flex justify-center items-center">
                            <IconBrandVk stroke={0} fill='white' />
                        </span>
                    </a>
                    <a role="button" className={`btn btn-square bg-[#0063A7] text-white visited:text-white ${montserratFont.className}`} href={'https://t.me/jkhsakha_gup'}>
                        <span className="justify-self-start flex justify-center items-center">
                            <IconBrandOkRu />
                        </span>
                    </a>
                </div>
            </div>
        </section>
    )
}

export default BannerCompact