---
// 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;

const coverUrl = comic.md_comics.md_covers[0]
  ? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
  : '/placeholder.png';

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

// Define standard image dimensions
const IMG_WIDTH = 250;
const IMG_HEIGHT = 350;

// Generate optimized image URL with dimensions
const optimizedCoverUrl = coverUrl.includes('meo.comick.pictures') 
  ? `${coverUrl}?width=${IMG_WIDTH}&quality=80` 
  : coverUrl;
---

<div class="comic-card">
  <a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
    <div class="image-container">
      {!isAvif ? (
        <Image 
          src={optimizedCoverUrl} 
          alt={comic.md_comics.title}
          width={IMG_WIDTH}
          height={IMG_HEIGHT}
          loading="lazy"
        />
      ) : (
        <img
          src={optimizedCoverUrl}
          alt={comic.md_comics.title}
          width={IMG_WIDTH}
          height={IMG_HEIGHT}
          loading="lazy"
          onError={(e) => {
            e.currentTarget.src = '/placeholder.png';
          }}
        />
      )}
    </div>
    <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 define:vars={{ imgWidth: `${IMG_WIDTH}px`, imgHeight: `${IMG_HEIGHT}px` }}>
  .comic-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, background-color 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

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

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

  .image-container {
    width: var(--imgWidth);
    height: var(--imgHeight);
    position: relative;
    overflow: hidden;
    background: var(--bg-hover);
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .comic-card:hover .image-container img {
    transform: scale(1.05);
  }

  .comic-info {
    padding: 1rem;
  }

  .comic-info h3 {
    margin: 0;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .comic-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
  }

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