<script lang="ts">
	import type { ModelCard } from "$lib/type";
	import Button from "$lib/components/Button.svelte";
	import Icon from "@iconify/svelte";

  export let card: ModelCard;

</script>
<div
  class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
>
  <div class="w-full h-[250px] relative z-[1] mb-3 overflow-hidden">
    <div class="w-full h-full bg-center bg-cover rounded-lg" style="background-image: url('{card.image}');"></div>
    <div class="group-hover:opacity-100 opacity-0 translate-x-full group-hover:translate-x-0 transition-all duration-200 absolute right-3 bottom-3">
      <Button theme="light" size="md">
        Try it now
      </Button>
    </div>
  </div>
  <div class="flex items-center justify-between w-full gap-4">
    <p class="text-white font-semibold text-base mb-1 truncate">{card?.title ?? card?.repo}</p>
    <div class="flex items-center justify-end gap-3">
      <div class="text-white text-sm flex items-center justify-end gap-1.5">
        <Icon icon="solar:heart-bold" class="w-5 h-5 text-red-500" />
        {card.likes ?? 0}
      </div>
      <div class="text-white text-sm flex items-center justify-end gap-1.5">
        <Icon icon="solar:download-square-bold" class="w-5 h-5 text-blue-500" />
        {card.downloads ?? 0}
      </div>
    </div>
  </div>
</div>