---
import { Icon } from "astro-icon/components";
import type { Project } from "../types";
import { formatRelativeTime } from "../utils/gitea";

interface Props {
    project: Project;
}

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

<div
    class="card bg-accent text-accent-content w-full max-w-sm shrink shadow-lg hover:shadow-xl transition-shadow"
>
    <div class="card-body">
        <h2
            class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words"
        >
            {project.name}
        </h2>

        <p class="text-center break-words">
            {project.description}
        </p>

        {
            project.giteaInfo &&
                (project.giteaInfo.commits > 0 ||
                    project.giteaInfo.releases > 0 ||
                    project.giteaInfo.language) && (
                    <>
                        <div class="divider my-2 before:bg-accent-content/30 after:bg-accent-content/30" />
                        <div class="flex flex-wrap gap-3 justify-center text-sm">
                            <div class="flex items-center gap-1.5">
                                <Icon
                                    name="mdi:source-commit"
                                    class="w-4 h-4"
                                />
                                <span class="font-semibold">
                                    {project.giteaInfo.commits}
                                </span>
                                <span class="opacity-70">commits</span>
                            </div>
                            <div class="flex items-center gap-1.5">
                                <Icon name="mdi:tag-multiple" class="w-4 h-4" />
                                <span class="font-semibold">
                                    {project.giteaInfo.releases}
                                </span>
                                <span class="opacity-70">releases</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-2 justify-center mt-2">
                            {project.giteaInfo.language && (
                                <div class="badge badge-sm gap-1 bg-accent-content/20 border-accent-content/30">
                                    <Icon
                                        name="mdi:code-tags"
                                        class="w-3 h-3"
                                    />
                                    {project.giteaInfo.language}
                                </div>
                            )}
                            {project.giteaInfo.updatedAt && (
                                <div class="badge badge-sm gap-1 bg-accent-content/20 border-accent-content/30">
                                    <Icon
                                        name="mdi:clock-outline"
                                        class="w-3 h-3"
                                    />
                                    {formatRelativeTime(
                                        project.giteaInfo.updatedAt,
                                    )}
                                </div>
                            )}
                        </div>
                    </>
                )
        }

        {
            project.giteaInfo?.topics &&
                project.giteaInfo.topics.length > 0 && (
                    <>
                        <div class="divider my-2 before:bg-accent-content/30 after:bg-accent-content/30" />
                        <div class="flex gap-2 flex-wrap justify-center">
                            {project.giteaInfo.topics.map((tag: string) => (
                                <div class="badge badge-sm badge-outline gap-1">
                                    <Icon name="mdi:tag" class="w-3 h-3" />
                                    {tag}
                                </div>
                            ))}
                        </div>
                    </>
                )
        }

        <div class="card-actions justify-center gap-2 mt-4">
            {
                project.link && (
                    <a
                        href={project.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        class="btn btn-sm gap-2 bg-accent-content text-accent hover:bg-accent-content/90"
                        aria-label={`Visit ${project.name}`}
                    >
                        <Icon name="mdi:link" class="w-4 h-4" />
                        Source
                    </a>
                )
            }
            {
                project.iosLink && (
                    <a
                        href={project.iosLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        class="btn btn-sm gap-2 bg-accent-content text-accent hover:bg-accent-content/90"
                        aria-label={`Download ${project.name} on iOS App Store`}
                    >
                        <Icon name="mdi:apple" class="w-4 h-4" />
                        iOS
                    </a>
                )
            }
            {
                project.androidLink && (
                    <a
                        href={project.androidLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        class="btn btn-sm gap-2 bg-accent-content text-accent hover:bg-accent-content/90"
                        aria-label={`Download ${project.name} on Google Play Store`}
                    >
                        <Icon name="mdi:google-play" class="w-4 h-4" />
                        Android
                    </a>
                )
            }
        </div>
    </div>
</div>