import moduleProps from '@/lib/moduleProps'
import { PortableText } from 'next-sanity'
import Pretitle from '@/ui/Pretitle'
import Code from './RichtextModule/Code'
import CustomHTML from './CustomHTML'
import Reputation from '@/ui/Reputation'
import CTAList from '@/ui/CTAList'
import { ResponsiveImg } from '@/ui/Img'
import { cn } from '@/lib/utils'

export default function HeroSaaS({
	pretitle,
	content,
	ctas,
	assets,
	assetFaded,
	...props
}: Partial<{
	pretitle: string
	content: any
	ctas: Sanity.CTA[]
	assets: Sanity.Img[]
	assetFaded?: boolean
}> &
	Sanity.Module) {
	const asset = assets?.[0]

	return (
		<section className="section space-y-8 text-center" {...moduleProps(props)}>
			<div className="richtext mx-auto max-w-2xl text-balance">
				<Pretitle>{pretitle}</Pretitle>
				<PortableText
					value={content}
					components={{
						types: {
							code: ({ value }) => (
								<Code
									value={value}
									className="mx-auto mt-6! max-w-max"
									theme="snazzy-light"
								/>
							),
							'custom-html': ({ value }) => <CustomHTML {...value} />,
							'reputation-block': ({ value }) => (
								<Reputation
									className="!mt-4 justify-center"
									reputation={value.reputation}
								/>
							),
						},
					}}
				/>
				<CTAList ctas={ctas} className="!mt-8 justify-center" />
			</div>

			{(() => {
				switch (asset?._type) {
					case 'img':
						return (
							<ResponsiveImg
								img={asset}
								pictureProps={{
									className: cn(
										'anim-fade-to-t w-full block [animation-duration:1s]',
										assetFaded &&
											'[mask:linear-gradient(to_top,transparent,#000_50%)]',
									),
								}}
								width={2400}
								draggable={false}
							/>
						)
					default:
						return null
				}
			})()}
		</section>
	)
}

src/ui/modules/HeroSaaS.tsx