You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.6 KiB
109 lines
3.6 KiB
"use client";
|
|
|
|
import { useMarriageAdvisorsQuery } from "@/hooks/marriage/use-marriage-advisors";
|
|
import Button from "./button";
|
|
import NetworkImage from "./network-image";
|
|
|
|
const FALLBACK_AVATAR = "/assets/images/Avatar Image.png";
|
|
|
|
export type AdvisorAvatar = {
|
|
id: string;
|
|
src: string;
|
|
};
|
|
|
|
type AdvisorActionsCardProps = {
|
|
title: string;
|
|
description: string;
|
|
/** Static fallback avatars — used only while the API hasn't responded yet. */
|
|
avatars: AdvisorAvatar[];
|
|
extraCount: number;
|
|
getAdvisorLabel: string;
|
|
getAdvisorHref: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function AdvisorActionsCard({
|
|
title,
|
|
description,
|
|
avatars: fallbackAvatars,
|
|
extraCount: fallbackExtraCount,
|
|
getAdvisorLabel,
|
|
getAdvisorHref,
|
|
className,
|
|
}: AdvisorActionsCardProps) {
|
|
const { data, isLoading } = useMarriageAdvisorsQuery();
|
|
const advisors = data?.results ?? [];
|
|
|
|
// Derive real avatars from API response (pick first 3 with an avatar).
|
|
const realAvatars: AdvisorAvatar[] = advisors
|
|
.filter((a) => a.avatar_url)
|
|
.slice(0, 3)
|
|
.map((a) => ({
|
|
id: a.username,
|
|
src: a.avatar_url ?? FALLBACK_AVATAR,
|
|
}));
|
|
|
|
const displayAvatars =
|
|
realAvatars.length > 0 ? realAvatars : fallbackAvatars;
|
|
|
|
// Show total remaining advisors (capped at advisor count minus shown avatars).
|
|
const displayExtraCount =
|
|
advisors.length > 0
|
|
? Math.max(0, advisors.length - displayAvatars.length)
|
|
: fallbackExtraCount;
|
|
|
|
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">
|
|
{isLoading
|
|
? /* ── Shimmer circles while API loads ── */
|
|
Array.from({ length: 3 }).map((_, i) => (
|
|
<span
|
|
key={`shimmer-${i}`}
|
|
className="-ml-1.5 flex h-[30px] w-[30px] overflow-hidden rounded-full border-2 border-white first:ml-0 shimmer-bg"
|
|
/>
|
|
))
|
|
: displayAvatars.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"
|
|
>
|
|
<NetworkImage
|
|
src={avatar.src}
|
|
fallbackSrc={FALLBACK_AVATAR}
|
|
alt=""
|
|
width={30}
|
|
height={30}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</span>
|
|
))}
|
|
{!isLoading && displayExtraCount > 0 && (
|
|
<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]">
|
|
+{displayExtraCount}
|
|
</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;
|