"use client";

import Image from "next/image";
import Button from "./button";

export type AdvisorAvatar = {
  id: string;
  src: string;
};

type AdvisorActionsCardProps = {
  title: string;
  description: string;
  avatars: AdvisorAvatar[];
  extraCount: number;
  getAdvisorLabel: string;
  getAdvisorHref: string;
  className?: string;
};

export function AdvisorActionsCard({
  title,
  description,
  avatars,
  extraCount,
  getAdvisorLabel,
  getAdvisorHref,
  className,
}: AdvisorActionsCardProps) {
  return (
    <section className={["space-y-3", className].filter(Boolean).join(" ")}>
      <div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
        <h2 className="group-16 leading-none font-bold text-[#1C1C1C]">
          {title}
        </h2>
        <p className="mt-2 max-w-[280px] group-10 leading-[1.45] font-semibold text-[#8A8A8A]">
          {description}
        </p>

        <div className="mt-4 flex items-center justify-between gap-3">
          <div className="flex items-center pl-1">
            {avatars.map((avatar) => (
              <span
                key={avatar.id}
                className="-ml-1.5 flex h-[30px] w-[30px] overflow-hidden rounded-full border-2 border-white bg-[#E7E7E7] first:ml-0"
              >
                <Image
                  src={avatar.src}
                  alt=""
                  width={30}
                  height={30}
                  className="h-full w-full object-cover"
                />
              </span>
            ))}
            <span className="-ml-1.5 flex h-[30px] w-[30px] items-center justify-center rounded-full border-2 border-white bg-[#EDEEF1] group-10 font-semibold text-[#1C1C1C]">
              +{extraCount}
            </span>
          </div>

          <Button
            className="w-auto rounded-[9px] border-none bg-[#EBEDF0] bg-none px-5 py-[13px] text-[#111111]! shadow-none"
            href={getAdvisorHref}
          >
            {getAdvisorLabel}
          </Button>
        </div>
      </div>
    </section>
  );
}

export default AdvisorActionsCard;