import { PlusIcon } from "lucide-react"

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const avatarUrl = new URL("../assets/avatars/avatar-01.jpg", import.meta.url).href

export function AvatarDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center gap-4">
        <Avatar>
          <AvatarImage src={avatarUrl} alt="Profile portrait" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="/missing-avatar.png" alt="Missing image" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
      </div>

      <div className="flex flex-wrap items-center gap-4">
        <Avatar>
          <AvatarImage src={avatarUrl} alt="Profile portrait" />
          <AvatarFallback>CN</AvatarFallback>
          <AvatarBadge />
        </Avatar>
        <Avatar>
          <AvatarFallback>PP</AvatarFallback>
          <AvatarBadge className="size-5 bg-success">
            <PlusIcon className="size-3" />
          </AvatarBadge>
        </Avatar>
      </div>

      <AvatarGroup>
        <Avatar>
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+3</AvatarGroupCount>
      </AvatarGroup>

      <div dir="rtl">
        <AvatarGroup>
          <Avatar>
            <AvatarFallback>ح</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>ن</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>م</AvatarFallback>
          </Avatar>
          <AvatarGroupCount>+٣</AvatarGroupCount>
        </AvatarGroup>
      </div>
    </div>
  )
}
