---
import { Icon } from "astro-icon/components";
import type { Talk } from "../types";

interface Props {
    talk: Talk;
}

const { talk } = Astro.props;
---

<div
    class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
>
    <div class="card-body p-6 break-words">
        <h2
            class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100"
        >
            {talk.name}
        </h2>

        <p class="text-center break-words my-4 text-base-100">
            {talk.description}
        </p>

        <div class="flex flex-col gap-2 mb-4 text-sm">
            {
                talk.date && (
                    <div class="flex items-center gap-2">
                        <span class="font-semibold">Date:</span>
                        <span>{talk.date}</span>
                    </div>
                )
            }
        </div>

        <div class="card-actions justify-end mt-4">
            <a
                href={talk.link}
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
                aria-label={`Visit ${talk.name}`}
            >
                <Icon name="mdi:link" class="text-lg" />
            </a>
        </div>
    </div>
</div>
