import {getCatalogIndexData} from '@prisma/client/sql'
import {getLocale} from 'next-intl/server'
import Image from 'next/image'
import React from 'react'

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 FeatureCardFront from '@/components/shared/store/feature-card-front'
import Terms from '@/components/shared/terms'
import {carousels} from '@/lib/data'
import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
import {db} from '@/lib/db/prisma/client'
import {dump} from '@/lib/utils'
import mainFallback from '@/public/main-fallback.jpg'
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() {
	const locale = await getLocale()
	const catalog: CategoryPageSqlSchema[] = await db.$queryRawTyped(
		getCatalogIndexData(locale)
	)

	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'>
						<section className='w-full'>
							<HomeCarousel items={carousels}></HomeCarousel>
						</section>
					</div>
				</div>
			</div>

			<section className='container mb-4 mt-8'>
				<FeatureCards items={catalog} />
			</section>

			<Terms />

			<section className='container mb-4 mt-12'>
				<h2 className='font-heading text-center text-3xl font-bold uppercase tracking-tight text-brand-violet'>
					{locale !== 'ru' ? "Цікаво про здоров'я" : 'Интересно о здоровье'}
				</h2>
			</section>
			<section className='container mb-4 mt-8'>
				<div className='re relative my-12 overflow-hidden'>
					<Image
						alt={''}
						width={1440}
						height={753}
						src={mainFallback}
						sizes='100vw'
						style={{
							width: '100%',
							height: 'auto'
						}}
					/>
				</div>
			</section>
		</>
	)
}