"use client";

import { memo } from "react";
import { cls } from "@/lib/utils";
import Image from "next/image";

export interface Avatar {
  src: string;
  alt: string;
}

interface AvatarGroupProps {
  avatars: Avatar[];
  text?: string;
  maxVisible?: number;
  className?: string;
  avatarClassName?: string;
  avatarImageClassName?: string;
  avatarOverlapClassName?: string;
  textClassName?: string;
  ariaLabel?: string;
}

const AvatarGroup = ({
  avatars,
  text,
  maxVisible = 5,
  className = "",
  avatarClassName = "",
  avatarImageClassName = "",
  avatarOverlapClassName = "-ml-3",
  textClassName = "",
  ariaLabel = "User avatars",
}: AvatarGroupProps) => {
  const visibleAvatars = avatars.slice(0, maxVisible);
  const remainingCount = Math.max(0, avatars.length - maxVisible);

  return (
    <div
      role="group"
      aria-label={ariaLabel}
      className={cls("relative z-1 flex items-center gap-3", className)}
    >
      <div className="flex items-center">
        {visibleAvatars.map((avatar, index) => (
          <div
            key={index}
            className={cls(
              "relative card p-0.5 rounded-theme",
              index !== 0 && avatarOverlapClassName,
              `z-[${visibleAvatars.length - index}]`,
              avatarClassName
            )}
          >
            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-theme overflow-hidden", avatarImageClassName)}>
              <Image
                src={avatar.src}
                alt={avatar.alt}
                fill
                className="w-full h-full object-cover"
                unoptimized={avatar.src.startsWith('http') || avatar.src.startsWith('//')}
              />
            </div>
          </div>
        ))}
        {remainingCount > 0 && (
          <div
            className={cls(
              `card p-0.5 rounded-theme ${avatarOverlapClassName} z-0`,
              avatarClassName
            )}
          >
            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-theme flex items-center justify-center text-xs text-foreground", avatarImageClassName)}>
              +{remainingCount}
            </div>
          </div>
        )}
      </div>
      {text && (
        <p className={cls("relative z-1 text-sm text-foreground text-balance", textClassName)}>
          {text}
        </p>
      )}
    </div>
  );
};

AvatarGroup.displayName = "AvatarGroup";

export default memo(AvatarGroup);

const avatars = [
  { src: "/avatars/avatar1.png", alt: "Avatar 1" },
  { src: "/avatars/avatar2.png", alt: "Avatar 2" },
  { src: "/avatars/avatar3.png", alt: "Avatar 3" },
  { src: "/avatars/avatar4.png", alt: "Avatar 4" },
  { src: "/avatars/avatar5.png", alt: "Avatar 5" },
  { src: "/avatars/avatar6.png", alt: "Avatar 6" },
];

const TeamSection = () => (
  <AvatarGroup
    avatars={avatars}
    text="Our Team"
    ariaLabel="Team avatars"
  />
);

export const Pricing = () => (
  <div className="space-y-12">
    <div className="border-t border-b border-gray-200 px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
      <div className="sm:col-span-3">
        <h3 className="text-lg font-medium leading-6 text-gray-900">Pricing</h3>
        <p className="mt-1 text-sm text-gray-500">
          Choose a pricing plan that works for you.
        </p>
      </div>
      <div className="mt-10 sm:col-span-2 sm:mt-0">
        <div className="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
          <div className="mt-6 flex items-center justify-between">
            <p className="text-4xl font-bold text-gray-900">$20</p>
            <p className="text-base font-medium text-gray-500">per month</p>
          </div>
          <ul role="list" className="mt-8 space-y-10">
            <li className="flex gap-x-4 text-sm leading-6">
              <svg
                className="h-6 w-5 text-green-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>Unlimited projects</span>
            </li>
            <li className="flex gap-x-4 text-sm leading-6">
              <svg
                className="h-6 w-5 text-green-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>24/7 support</span>
            </li>
            <li className="flex gap-x-4 text-sm leading-6">
              <svg
                className="h-6 w-5 text-green-500"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <span>Custom domain</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
);

export const Team = () => (
  <div className="space-y-12">
    <div className="border-t border-b border-gray-200 px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:p-6">
      <div className="sm:col-span-3">
        <h3 className="text-lg font-medium leading-6 text-gray-900">Our Team</h3>
        <p className="mt-1 text-sm text-gray-500">
          Meet the team behind the scenes.
        </p>
      </div>
      <div className="mt-10 sm:col-span-2 sm:mt-0">
        <TeamSection />
      </div>
    </div>
  </div>
);
