bewell-in-ua/components/pages/product/index.tsx

import {ProductResource} from '@prisma/client'
import {getProductByIdWitData} from '@prisma/client/sql'
import {ChevronDown, ChevronsUpDown} from 'lucide-react'
import {getTranslations} from 'next-intl/server'
import {notFound} from 'next/navigation'

import ProductCarousel from '@/components/pages/product/carousel'
import AddCartButton from '@/components/shared/store/add-cart-button'
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger
} from '@/components/ui/collapsible'
import {Select, SelectTrigger, SelectValue} from '@/components/ui/select'
import products from '@/data/products'
import {Link} from '@/i18n/routing'
import {getMetaOfFile} from '@/lib/config/resources'
import {getProductResources} from '@/lib/data/models/product'
import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
import {dump, thisLocale, toPrice} from '@/lib/utils'
import {Button} from '@/ui/button'
import {Separator} from '@/ui/separator'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/ui/tabs'

export default async function ProductPageIndex({
	data,
	id
}: {
	data: CategoryPageSqlSchema[]
	id: string
}) {
	const locale = await thisLocale(data)
	if (!locale) notFound()

	const t = await getTranslations('Common')

	const resources: ProductResource[] | null = await getProductResources(
		parseInt(id)
	)

	//const files = await getMetaOfFile(locale.productId)
	const attrs = products.find(products => products.id === parseInt(id))

	return (
		<div className='mt-1'>
			<div className='container flex flex-col gap-8 sm:flex-row'>
				{/*<pre>{dump(resources)}</pre>*/}
				<div className='bw-product-col-left pt-3'>
					<Breadcrumb className='mb-4'>
						<BreadcrumbList>
							<BreadcrumbItem>
								<BreadcrumbLink href={'/'}>{t('home')}</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbLink href={`/category/${locale.categorySlug}`}>
									{locale.categoryTitle}
								</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbPage>{locale.title}</BreadcrumbPage>
							</BreadcrumbItem>
						</BreadcrumbList>
					</Breadcrumb>
					<div className='flex w-full items-center justify-between'>
						<h1 className='font-heading mt-4 text-3xl font-semibold'>
							{locale.title}
						</h1>
						{/*<AddCartButton
							product={{
								id: locale.productId,
								quantity: 1,
								title: locale.title,
								price: toPrice(locale.price),
								image: locale.image
							}}
						/>*/}
					</div>
					<Separator className='my-4 h-0 border-b-2 border-brand-violet' />
					<ProductCarousel images={resources} title={locale.title} />
					<Tabs defaultValue='article' className=''>
						<TabsList className='grid w-full grid-cols-2'>
							<TabsTrigger value='article'>Опис</TabsTrigger>
							<TabsTrigger value='instuction'>Інструкція</TabsTrigger>
						</TabsList>
						<TabsContent value='article'>
							<div>
								<h1 className='my-6 ml-12 text-3xl font-bold text-brand-violet'>
									{locale.headingTitle}
								</h1>
								<div
									className='ml-8 w-[88%] rounded-lg border-x-4 border-brand-violet bg-zinc-50 p-4 leading-relaxed'
									dangerouslySetInnerHTML={{
										__html: locale.description as string
									}}
								></div>
								<article
									className='bw-product__text'
									dangerouslySetInnerHTML={{__html: locale.content as string}}
								></article>
							</div>
						</TabsContent>
						<TabsContent value='instuction'>
							<div
								className='bw-product__text'
								dangerouslySetInnerHTML={{__html: locale.instruction as string}}
							></div>
						</TabsContent>
					</Tabs>
				</div>
				<section className='bw-product-col-right mt-16 pt-3'>
					<div className=''>
						{t('price')}:
						<span className='ml-2 flex-auto text-right text-xl font-bold text-brand-violet'>
							{toPrice(locale.price)}
						</span>
					</div>
					{attrs && (
						<>
							<Select>
								<SelectTrigger className='my-4 w-full'>
									<SelectValue placeholder={attrs?.title} />
								</SelectTrigger>
							</Select>
							<Button className='mb-4 w-full text-brand-violet'>Купити</Button>
							<div>Є в наявності</div>

							<div className='mb-4 mt-8 font-bold'>Характеристики</div>

							<div className='flex items-center justify-between border-y-2 py-3 pl-1 text-sm'>
								<div className='text-gray-600'>Категорія</div>
								<div className='text-brand-violet'>
									<Link href={`/category/${locale.categorySlug}`}>
										{locale.categoryTitle}
									</Link>
								</div>
							</div>

							<Collapsible className='border-b-2 py-3 pl-1 text-sm'>
								<CollapsibleTrigger className='flex w-full items-center justify-between'>
									<div className='text-gray-600'>Склад</div>
									<div>
										<ChevronDown color='#4b5563' />
									</div>
								</CollapsibleTrigger>
								<CollapsibleContent className='py-3 text-sm text-gray-600'>
									Склад 1 капсула містить:
									<br />
									сухий екстракт ламінарії (Laminaria japonica Extract 1%
									iodine) – 15,0 мг (mg), що еквівалентно 150,0 мкг (μg) йоду,
									<br />
									селенометіонін ̶ 250,0 мкг (μg), що еквівалентно 100,0 мкг (μg)
									селену;
									<br />
									допоміжні речовини: наповнювач: целюлоза мікрокристалічна,
									антиспікаючий агент: кремнію діоксид колоїдний безводний,
									кальцію стеарат.
								</CollapsibleContent>
							</Collapsible>

							<div className='flex items-center justify-between border-b-2 py-3 pl-1 text-sm'>
								<div className='text-gray-600'>Форма</div>
								<div className='text-brand-violet'>{attrs?.form}</div>
							</div>
							<div className='flex items-center justify-between border-b-2 py-3 pl-1 text-sm'>
								<div className='text-gray-600'>Виробник</div>
								<div className='text-brand-violet'>{attrs?.vendor}</div>
							</div>
							<div className='flex items-center justify-between border-b-2 py-3 pl-1 text-sm'>
								<div className='text-gray-600'>Країна-виробник</div>
								<div className='text-brand-violet'>{attrs?.country}</div>
							</div>
						</>
					)}

					<div className='ml-1 mt-4 inline-block border-b border-dashed border-b-brand-violet pb-2 text-sm text-brand-violet'>
						Завантажити інструкцію
					</div>
				</section>
			</div>
		</div>
	)
}