---
import { ExternalLink, ChevronDown } from "@lucide/astro";

interface Props {
  displayBanner: boolean;
  repo: {
    name: string;
    description: string;
    html_url: string;
    website: string;
    topics: string[];
    banner_url: string;
    mirrors: {
      github?: string;
      gitlab?: string;
    };
  };
}

const { repo } = Astro.props;

const platforms = [
  ...(repo.mirrors.github
    ? [{ label: "GitHub", url: repo.mirrors.github }]
    : []),
  ...(repo.mirrors.gitlab
    ? [{ label: "GitLab", url: repo.mirrors.gitlab }]
    : []),
  { label: "Gitea", url: repo.html_url },
];

const hasMultiplePlatforms = platforms.length > 1;
---

<article
  class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
>
  { Astro.props.displayBanner && repo.banner_url && (
  <figure class="aspect-video bg-base-200 overflow-hidden">
    <img
      src={repo.banner_url}
      alt={repo.name}
      class="w-full h-full object-cover"
      onerror="this.parentElement.style.display='none'"
    />
  </figure>
)}

  <div class="card-body">
    <h2 class="card-title hover:text-primary transition-colors">
      <a href={repo.html_url} target="_blank" rel="noopener noreferrer">
        {repo.name}
      </a>
    </h2>

    {repo.description && <p class="text-base-content/80">{repo.description}</p>}

    <div class="flex flex-wrap gap-2 mt-2">
      {
        repo.topics.map((topic) => (
          <span class="badge badge-sm rounded-sm badge-soft badge-accent">
            {topic}
          </span>
        ))
      }
    </div>

    <div class="card-actions justify-end mt-4 gap-2">
      {
        repo.website && (
          <a
            href={repo.website}
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-soft btn-sm gap-1"
          >
            <ExternalLink class="size-4" />
            Website
          </a>
        )
      }

      {
        hasMultiplePlatforms ? (
          <div class="dropdown dropdown-end">
            <div
              tabindex="0"
              role="button"
              class="btn btn-soft btn-primary btn-sm gap-1"
            >
              <ExternalLink class="size-4" />
              View Source
              <ChevronDown class="size-3" />
            </div>
            <ul
              tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-xl z-10 w-36 p-1.5 shadow border border-base-200 text-sm"
            >
              {platforms.map(({ label, url }) => (
                <li>
                  <a href={url} target="_blank" rel="noopener noreferrer">
                    {label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <a
            href={repo.html_url}
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-soft btn-primary btn-sm gap-1"
          >
            <ExternalLink class="size-4" />
            View on Gitea
          </a>
        )
      }
    </div>
  </div>
</article>