---
// Import the necessary types and assets
import type { Comic } from '../lib/types';
import { Image } from 'astro:assets';

interface Props {
  comic: Comic;
}

const { comic } = Astro.props;

// Determine if the file is AVIF based on the URL
const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');

const coverUrl = comic.md_comics.md_covers[0]
  ? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
  : '/placeholder.png';
---
<div class="comic-card">
  <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
    {!isAvif ? (
      // Infer size only for non-AVIF files
      <Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
    ) : (
      // Provide fallback handling for AVIF files
      <img
        src={coverUrl}
        alt={comic.md_comics.title}
        width="300" // Default width
        height="300" // Default height
        style={{ objectFit: 'cover' }}
      />
    )}
    <div class="comic-info">
      <h3>{comic.md_comics.title}</h3>
      <p>Chapter {comic.chap}</p>
      <p class="date">{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}</p>
    </div>
  </a>
</div>

<style>
  .comic-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
  }

  .comic-card:hover {
    transform: translateY(-4px);
  }

  .comic-card a {
    text-decoration: none;
    color: var(--text-color);
  }

  .comic-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  .comic-info {
    padding: 1rem;
  }

  .comic-info h3 {
    margin: 0;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .comic-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
  }

  .date {
    margin-top: 0.5rem;
    font-size: 0.8rem !important;
  }
</style>