---
import type { Contributor } from "~/utils/types";

type Props = Contributor;

const {
  name,
  image,
  totalAmountDonated,
  isAdmin,
  publicMessage,
  collectiveSlug,
} = Astro.props;
---

<a
  class="not-content relative flex flex-col items-center border border-gray-300 p-4 text-inherit no-underline hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
  href={`https://opencollective.com/${collectiveSlug}`}
>
  <div class="flex flex-col items-center text-center">
    <img class="h-16 w-16 rounded-full" src={image} alt={name} />
    {
      isAdmin && (
        <div class="mt-2 rounded-full bg-accent-600 px-2 py-1 text-xs font-semibold text-white dark:bg-accent-200 dark:text-gray-900">
          Admin
        </div>
      )
    }
    <p class="font-semibold">{name}</p>
  </div>
  <p class="mb-8 text-center text-sm">{publicMessage}</p>
  <p class="absolute bottom-2 text-center font-semibold">
    ${totalAmountDonated / 100}
  </p>
</a>
