import { PortableText } from 'next-sanity'
import { VscQuote, VscSurroundWith } from 'react-icons/vsc'
import { Img } from '@/ui/Img'

export default function TestimonialFeatured({
	testimonial,
}: Partial<{
	testimonial: Sanity.Testimonial
}>) {
	if (!testimonial) return null

	const { author } = testimonial

	return (
		<section className="section">
			<div className="section bg-accent/3 flex max-w-screen-md items-center gap-x-12 gap-y-6 rounded max-sm:flex-col">
				<div className="space-y-2">
					<VscQuote className="text-accent inline-block shrink-0 text-4xl" />

					<div className="self-center text-xl text-balance">
						<PortableText value={testimonial.content} />
					</div>

					<dl className="text-start">
						<dt className="flex flex-wrap items-center gap-1">
							{author?.name}

							{testimonial?.source && (
								<cite>
									<a
										className="text-ink/50"
										href={testimonial.source}
										target="_blank"
										title="Source"
									>
										<VscSurroundWith />
									</a>
								</cite>
							)}
						</dt>

						{author?.title && (
							<dd className="text-sm text-balance">{author?.title}</dd>
						)}
					</dl>
				</div>

				<Img
					className="mx-auto max-w-[200px] shrink-0 rounded"
					image={author?.image}
					width={400}
					alt={
						[author?.name, author?.title].filter(Boolean).join(', ') || 'Author'
					}
				/>
			</div>
		</section>
	)
}