import { fetchSanityLive, groq } from '@/sanity/lib/fetch'
import { PortableText } from 'next-sanity'
import Pretitle from '@/ui/Pretitle'
import Img from '@/ui/Img'
import { cn } from '@/lib/utils'
import css from './LogoList.module.css'

export default async function LogoList({
	pretitle,
	intro,
	logos,
	logoType = 'default',
	autoScroll,
	duration = 8,
}: Partial<{
	pretitle: string
	intro: any
	logos: Sanity.Logo[]
	logoType: 'default' | 'light' | 'dark'
	autoScroll?: boolean
	duration?: number
}>) {
	const allLogos =
		logos ||
		(await fetchSanityLive<Sanity.Logo[]>({
			query: groq`*[_type == 'logo']|order(name)`,
		}))

	return (
		<section className="section space-y-8">
			{(pretitle || intro) && (
				<header className="richtext mx-auto max-w-screen-sm text-balance text-center">
					<Pretitle>{pretitle}</Pretitle>
					<PortableText value={intro} />
				</header>
			)}

			<figure
				className={cn(
					'mx-auto flex items-center gap-y-8 pb-4',
					autoScroll
						? `${css.track} overflow-fade max-w-max overflow-hidden`
						: 'flex-wrap justify-center gap-x-4',
				)}
				style={
					{
						'--count': allLogos?.length,
						'--dur': `${duration}s`,
					} as React.CSSProperties
				}
			>
				{allLogos.map((logo, key) => (
					<Img
						className="h-[2.5em] w-[200px] shrink-0 object-contain px-4 max-sm:w-[150px]"
						style={{ '--index': key } as React.CSSProperties}
						image={logo.image?.[logoType]}
						imageWidth={400}
						alt={logo.name}
						key={key}
					/>
				))}
			</figure>
		</section>
	)
}