import Image from 'next/image'

import FeatureCards from '@/components/shared/home/feature-cards'
import {HomeCarousel} from '@/components/shared/home/home-carousel'
import AppCatalog from '@/components/shared/sidebar/app-catalog'
import {carousels} from '@/lib/data'
import {db} from '@/lib/db/prisma/client'
import {dump} from '@/lib/utils'
import image from '@/public/uploads/products/IMG_6572.jpg'

// const storeModel = async (id: any) => {
// 	return db.store.findFirst({
// 		where: {id},
// 		include: {
// 			storeLocale: {
// 				include: {
// 					meta: {
// 						include: {
// 							openGraph: true
// 						}
// 					}
// 				}
// 			}
// 		}
// 	})
// }

export default async function HomePage() {
	return (
		<>
			<div className='mt-1'>
				<div className='container flex flex-col sm:flex-row'>
					<section className='bw-layout-col-left pt-3'>
						<AppCatalog />
					</section>
					<div className='bw-layout-col-right pt-3'>
						{/*<pre>{dump(await storeModel(1))}</pre>*/}
						<section className='w-full'>
							<HomeCarousel items={carousels}></HomeCarousel>
						</section>
					</div>
				</div>
			</div>
			{/*<pre>{JSON.stringify(session)}</pre>*/}

			<section className='relative mx-auto mt-8 h-[640px] w-[840px] bg-brand-violet-200'>
				<Image
					src={'/uploads/products/IMG_6572.jpg'}
					//fill
					//sizes='(min-width: 808px) 50vw, 100vw'
					width={1280}
					height={1280}
					alt=''
					title=''
					priority
					style={{
						objectFit: 'contain' // cover, contain, none
					}}
				/>
			</section>

			<section className='mb-4 mt-[128px]'>
				<div className='container'>
					<FeatureCards />
				</div>
			</section>
		</>
	)
}