<?php
/**
 * Carte projet réutilisable
 * @param array $project Données du projet
 */

$title = $project['title'] ?? 'Sans titre';
$slug = $project['slug'] ?? '#';
$thumbnail = $project['thumbnail'] ?? 'default-project.webp';
$technologies = $project['technologies'] ?? [];
$maxTechs = 4;
?>

<article class="card-interactive group">
    <a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
        <!-- Thumbnail -->
        <div class="aspect-video overflow-hidden rounded-t-lg bg-surface-alt">
            <?= projectImage(
                $thumbnail,
                "Aperçu du projet " . $title,
                400,
                225,
                true,
                "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
            ) ?>
        </div>

        <!-- Contenu -->
        <div class="card-body">
            <h3 class="text-lg font-semibold text-text-primary mb-3 group-hover:text-primary transition-colors">
                <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
            </h3>

            <!-- Technologies (badges) -->
            <div class="flex flex-wrap gap-2">
                <?php foreach (array_slice($technologies, 0, $maxTechs) as $tech): ?>
                    <span class="badge"><?= htmlspecialchars($tech, ENT_QUOTES, 'UTF-8') ?></span>
                <?php endforeach; ?>

                <?php if (count($technologies) > $maxTechs): ?>
                    <span class="badge badge-muted">+<?= count($technologies) - $maxTechs ?></span>
                <?php endif; ?>
            </div>
        </div>
    </a>
</article>
