---
import type { CollectionEntry } from 'astro:content';

interface Props {
	testimonial: CollectionEntry<'testimonials'>;
	featured?: boolean;
}

const { testimonial, featured = false } = Astro.props;
const { name, role, company, avatar, rating, category, verified } = testimonial.data;
const { Content } = await testimonial.render();

// Generate star rating display
const stars = Array.from({ length: 5 }, (_, i) => i < rating);
---

<div
	class={`
  bg-dark-elevated border border-dark-border rounded-2xl p-6
  ${featured ? 'ring-2 ring-primary/30' : ''}
  hover:border-primary/50 transition-all duration-300
  ${featured ? 'shadow-xl shadow-primary/20' : 'shadow-md'}
`}
>
	<!-- Header -->
	<div class="mb-4 flex items-start gap-4">
		<!-- Avatar -->
		<div class="flex-shrink-0">
			{
				avatar ? (
					<img
						src={avatar}
						alt={name}
						class="h-16 w-16 rounded-full border-2 border-primary/30 object-cover"
					/>
				) : (
					<div class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-primary to-secondary text-2xl font-bold text-white">
						{name.charAt(0)}
					</div>
				)
			}
		</div>

		<!-- Name & Role -->
		<div class="min-w-0 flex-1">
			<div class="mb-1 flex items-center gap-2">
				<h3 class="truncate text-lg font-semibold text-white">{name}</h3>
				{
					verified && (
						<svg class="h-5 w-5 flex-shrink-0 text-primary" fill="currentColor" viewBox="0 0 20 20">
							<path
								fill-rule="evenodd"
								d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
								clip-rule="evenodd"
							/>
						</svg>
					)
				}
			</div>
			<p class="text-sm text-gray-400">
				{role}{company ? ` • ${company}` : ''}
			</p>

			<!-- Star Rating -->
			<div class="mt-2 flex items-center gap-1">
				{
					stars.map((filled) => (
						<svg
							class={`h-4 w-4 ${filled ? 'text-yellow-400' : 'text-gray-600'}`}
							fill="currentColor"
							viewBox="0 0 20 20"
						>
							<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
						</svg>
					))
				}
				<span class="ml-1 text-sm text-gray-400">{rating}.0</span>
			</div>
		</div>
	</div>

	<!-- Content -->
	<div class="prose prose-sm prose-invert max-w-none">
		<Content />
	</div>

	<!-- Category Badge (Optional) -->
	{
		featured && (
			<div class="mt-4 border-t border-dark-border pt-4">
				<span class="inline-block rounded-full bg-primary/20 px-3 py-1 text-xs font-medium text-primary">
					{category
						.split('-')
						.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
						.join(' ')}
				</span>
			</div>
		)
	}
</div>

<style>
	.prose p {
		@apply leading-relaxed text-gray-300;
	}

	.prose strong {
		@apply font-semibold text-white;
	}
</style>
