import { AvatarGroup } from "@lemonsqueezy/wedges";

export default function Example() {
  return (
    <div className="flex flex-col gap-12">
      <div className="flex items-center justify-center gap-6">
        <AvatarGroup
          size="sm"
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />

        <AvatarGroup
          size="sm"
          previousOnTop={true}
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />
      </div>

      <div className="flex items-center justify-center gap-6">
        <AvatarGroup
          size="md"
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />

        <AvatarGroup
          size="md"
          previousOnTop={true}
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />
      </div>

      <div className="flex items-center justify-center gap-6">
        <AvatarGroup
          size="lg"
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />

        <AvatarGroup
          size="lg"
          previousOnTop={true}
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />
      </div>

      <div className="flex items-center justify-center gap-6">
        <AvatarGroup
          size="xl"
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />

        <AvatarGroup
          size="xl"
          previousOnTop={true}
          items={[
            {
              src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 1",
            },
            {
              src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
            {
              src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop&crop=face",
              alt: "Avatar 2",
            },
          ]}
          moreLabel="+3"
        />
      </div>
    </div>
  );
}
