---
import AvatarComponent from '@/components/ui/avatar'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Link from '@components/Link.astro'
import type { CollectionEntry } from 'astro:content'
import { Github, Globe, Linkedin, Twitter } from 'lucide-react'

type Props = {
  author: CollectionEntry<'authors'>
  linkDisabled?: boolean
}
const { author, linkDisabled = false } = Astro.props
const { name, avatar, bio, pronouns, github, twitter, linkedin, website } =
  author.data
---

<div
  class="rounded-xl border p-4 transition-colors duration-300 ease-in-out has-[a:hover]:bg-secondary/50"
>
  <div class="flex flex-wrap gap-4">
    <Link
      href={`/authors/${author.slug}`}
      class={cn('block', linkDisabled && 'pointer-events-none')}
    >
      <AvatarComponent
        client:load
        src={avatar}
        alt={`Avatar of ${name}`}
        fallback={name[0]}
        className={cn(
          'size-32 rounded-md',
          !linkDisabled &&
            'transition-shadow duration-300 hover:cursor-pointer hover:ring-2 hover:ring-primary',
        )}
      />
    </Link>
    <div class="flex flex-grow flex-col justify-between">
      <div>
        <div class="flex items-center gap-2">
          <h3 class="text-lg font-semibold">{name}</h3>
          {
            pronouns && (
              <span class="text-sm text-muted-foreground">({pronouns})</span>
            )
          }
        </div>
        <p class="text-sm text-muted-foreground">{bio}</p>
      </div>
      <ul class="flex gap-2">
        {
          github && (
            <li>
              <Link
                href={`https://github.com/${github}`}
                aria-label="GitHub"
                title="GitHub"
                class={buttonVariants({ variant: 'outline', size: 'icon' })}
              >
                <Github className="size-4" />
              </Link>
            </li>
          )
        }
        {
          twitter && (
            <li>
              <Link
                href={`https://twitter.com/${twitter}`}
                aria-label="Twitter"
                title="Twitter"
                class={buttonVariants({ variant: 'outline', size: 'icon' })}
              >
                <Twitter className="size-4" />
              </Link>
            </li>
          )
        }
        {
          linkedin && (
            <li>
              <Link
                href={`https://linkedin.com/in/${linkedin}`}
                aria-label="LinkedIn"
                title="LinkedIn"
                class={buttonVariants({ variant: 'outline', size: 'icon' })}
              >
                <Linkedin className="size-4" />
              </Link>
            </li>
          )
        }
        {
          website && (
            <li>
              <Link
                href={website}
                aria-label="Website"
                title="Website"
                class={buttonVariants({ variant: 'outline', size: 'icon' })}
              >
                <Globe className="size-4" />
              </Link>
            </li>
          )
        }
      </ul>
    </div>
  </div>
</div>