src/lib/components/models/autocomplete/Item.svelte

<script lang="ts">
	import type { ModelCard } from "$lib/type";
	import Image from "../image/Image.svelte";

  export let model: ModelCard;
  export let onClick: () => void;

</script>

<button
  class="flex items-center justify-start gap-4 px-2 py-2.5 hover:bg-neutral-800/60 transition-all duration-200 rounded-lg cursor-pointer w-full text-left"
  on:click={onClick}
>
  <Image src={model?.image} generatedImage={model?.gallery?.[0]?.image} className="w-14 h-14 rounded-lg object-cover" alt={model?.id} />
  <div>
    <p class="text-neutral-200 text-base font-medium">{model.id}</p>
    <p class="text-neutral-400 text-sm">{model.id}</p>
  </div>
</button>