/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';

export function TestimonialCard( {
	quote,
	name,
	role,
	image = 'https://i.pravatar.cc/150?u=a042581f4e29026704d',
	theme = 'light',
} ) {
	const dark = theme === 'dark';

	return (
		<div>
			<p
				className={ clsx(
					'm-0 mb-3.5 text-base leading-relaxed text-pretty',
					dark ? 'text-white/85' : 'text-gray-700'
				) }
			>
				{ quote }
			</p>
			<div className="flex items-center gap-2.75">
				<div
					className={ clsx(
						'flex size-9 flex-none items-center justify-center rounded-full font-mono text-base font-medium overflow-hidden',
						dark
							? 'bg-white/14 text-white/50'
							: 'bg-gray-200 text-gray-400'
					) }
				>
					<img
						src={ image }
						alt="Avatar"
						className="size-full object-cover object-top"
					/>
				</div>
				<div>
					<div
						className={ clsx(
							'text-sm font-medium leading-[1.3]',
							dark ? 'text-white' : 'text-gray-900'
						) }
					>
						{ name }
					</div>
					<div
						className={ clsx(
							'text-sm leading-[1.3]',
							dark ? 'text-white/50' : 'text-gray-400'
						) }
					>
						{ role }
					</div>
				</div>
			</div>
		</div>
	);
}