---
import Link from '@/components/Link.astro'
import AvatarComponent from '@/components/ui/avatar'
import { cn } from '@/lib/utils'
import type { SocialLink } from '@/types'
import type { CollectionEntry } from 'astro:content'
import SocialIcons from './SocialIcons.astro'

interface Props {
  member: CollectionEntry<'members'>
}

const { member } = Astro.props
const { name, avatar, bio, pronouns } = member.data
const currentPath = Astro.url.pathname
const isAuthorPage = currentPath === `/members/${member.id}`

const socialLinks: SocialLink[] = [
  member.data.website && { href: member.data.website, label: 'Website' },
  member.data.github && { href: member.data.github, label: 'GitHub' },
  member.data.codeberg && { href: member.data.codeberg, label: 'Codeberg' },
  member.data.twitter && { href: member.data.twitter, label: 'Twitter' },
  member.data.linkedin && { href: member.data.linkedin, label: 'LinkedIn' },
  member.data.mail && { href: `mailto:${member.data.mail}`, label: 'Email' },
  member.data.instagram && {
    href: `mailto:${member.data.instagram}`,
    label: 'Instagram',
  },
].filter(Boolean) as SocialLink[]
---

<div
  class="has-[a:hover]:bg-muted/50 w-64 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
  <div class="flex flex-col items-center gap-4">
    <Link
      href={`/members/${member.id}`}
      class={cn('block', isAuthorPage && 'pointer-events-none')}
    >
      <AvatarComponent
        client:load
        src={avatar}
        alt={`Avatar of ${name}`}
        fallback={name[0]}
        className={cn(
          '.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-lg',
          !isAuthorPage &&
            'hover:ring-primary transition-shadow duration-300 hover:cursor-pointer hover:ring-2',
        )}
      />
    </Link>
    <div
      class="flex grow flex-col items-center justify-between gap-y-4 text-center"
    >
      <div>
        <div class="flex flex-col items-center gap-x-2">
          <h3 class="text-lg font-medium">{name}</h3>
          {
            pronouns && (
              <span class="text-muted-foreground font-mono text-xs">
                {pronouns}
              </span>
            )
          }
        </div>
        <p class="text-muted-foreground mt-3 leading-relaxed">{bio}</p>
      </div>
      <SocialIcons links={socialLinks} />
    </div>
  </div>
</div>