import { type PropsWithChildren } from 'react';

const CompanyInfoMockup = ({
    children
}: PropsWithChildren) => {
    return (
        <div className='bg-base-300 w-full h-min rounded-2xl sm:border-8 sm:border-black'>
            <div className='hidden sm:flex flex-col w-full'>
                <div className='w-full grid grid-cols-3 p-2'>
                    <div className='flex space-x-2 overflow-hidden'>
                        <img src='/buttons.svg' />
                        <div className='bg-base-100 shrink-0 rounded-3xl'>
                            <img src='/buttons-view.svg' />
                        </div>

                        <div className='bg-base-100 shrink-0 rounded-3xl'>
                            <img src='/buttons-nav.svg' />
                        </div>
                    </div>

                    <div className='flex justify-center'>
                        <div className='flex grow bg-base-100 rounded-3xl justify-center items-center'>
                            <span className='text-xs'>commit-it.ru</span>
                        </div>
                    </div>

                    <div className='flex justify-end'>
                        <div className='bg-base-100 rounded-3xl'>
                            <img src='/buttons-menu.svg' />
                        </div>
                    </div>
                </div>

                <div className='flex p-2 space-x-2'>
                    <img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-1.svg' />
                    <img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-2.svg' />
                    <img className='bg-base-100 w-7 p-1 rounded-full' src='/safari-tab-3.svg' />
                    
                    <div className='flex grow bg-base-100 rounded-2xl justify-center items-center'>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.37499 14.0209L9.99999 12.4376L12.625 14.0418L11.9375 11.0418L14.25 9.04177L11.2083 8.77094L9.99999 5.93761L8.79166 8.75011L5.74999 9.02094L8.06249 11.0418L7.37499 14.0209ZM6.10416 15.7693L7.13749 11.3418L3.70166 8.36511L8.22749 7.97344L9.99999 3.79761L11.7725 7.97261L16.2975 8.36427L12.8617 11.3409L13.8958 15.7684L9.99999 13.4184L6.10416 15.7693Z" fill="#1E1E1E" />
                        </svg>
                        <span className='text-xs'>КОММИТ</span>
                    </div>
                </div>
            </div>

            <div className='flex h-auto'>
                {children}
            </div>
        </div>
    )
};

export default CompanyInfoMockup;