"use client";

import type { BotObject } from "@/lib/types/apollo";
import { parseAvatar } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import CertifiedBotBadge from "../modules/bot/badges/certified-badge";
import { IconArrowUp, IconServer } from "@tabler/icons-react";

interface BotCardProps extends Partial<BotObject> {}

export default function BotReducedCard({
	id,
	avatar,
	name,
	shortDescription,
	certified,
	guildCount,
	votes,
}: BotCardProps) {
	return (
		<Link href={`/bot/${id}`}>
			<div className="relative animate-in fade-in slide-in-from-bottom-3 overflow-hidden group bg-card w-full h-full rounded-xl cursor-pointer group duration-150">
				<div
					draggable={false}
					className="animate-in bg-no-repeat group-hover:scale-110 duration-150 bg-cover fade-in absolute w-full h-32 gradient-mask-b-0 opacity-[0.15]"
					style={{
						backgroundImage: `url('${parseAvatar(avatar, id as string)}')`,
					}}
				/>
				<div className="relative z-[2] p-6">
					<div className="flex items-center mb-4 gap-4">
						<div>
							<div className="relative w-16 h-16 rounded-lg overflow-hidden">
                                <Image
									alt="bot avatar"
									draggable={false}
									src={parseAvatar(avatar, id as string)}
									width={64}
									height={64}
									className="w-full h-full object-cover"
								/>
							</div>
						</div>
						<div className="w-full">
							<div className="flex items-center justify-between w-full">
								<div className="flex items-center gap-1">
									<h3 className="min-w-min text-card-foreground font-semibold text-lg line-clamp-1">
										{name}
									</h3>
									{certified && <CertifiedBotBadge />}
								</div>
							</div>
							<h4 className="text-muted-foreground text-xs">
                            Fun, Moderation, Etc.
							</h4>
						</div>
					</div>
					<p className="text-secondary-foreground gradient-mask-b-30 text-sm mt-1 line-clamp-4 text-wrap break-words h-20">
						{shortDescription}
					</p>
					<div className="flex justify-between mt-4">
						<div className="flex gap-2 items-center">
							<IconArrowUp className="w-4 h-4" /> {votes?.totalCount}
						</div>
						<div className="flex gap-2 items-center">
							<IconServer className="w-4 h-4" /> {guildCount}
						</div>
					</div>
				</div>
			</div>
		</Link>
	);
}