'use client'

import UserFamilyCard from '@/components/groups/UserFamilyCard'
import type { UserGroupListItem } from '@/server/groups/fetchUserGroups'

export default function UserProfileFamiliesSection({
    groups,
    title,
    emptyText,
    leaderLabel,
    deputyLabel,
    membersLabel,
}: {
    groups: UserGroupListItem[]
    title: string
    emptyText: string
    leaderLabel: string
    deputyLabel: string
    membersLabel: (count: number) => string
}) {
    return (
        <section className="mt-4 border-t border-gray-200/80 pt-4 dark:border-white/10 sm:mt-5 sm:pt-5">
            <h3 className="mb-2.5 text-xs font-semibold text-gray-500 dark:text-white/60 sm:text-sm">{title}</h3>

            {groups.length === 0 ? (
                <div className="rounded-[12px] border border-dashed border-gray-200 bg-white/50 px-4 py-7 text-center dark:border-white/15 dark:bg-black/10">
                    <p className="text-sm text-gray-500 dark:text-white/60">{emptyText}</p>
                </div>
            ) : (
                <ul className={`flex flex-col gap-2 ${groups.length > 1 ? 'sm:grid sm:grid-cols-2 sm:gap-2' : ''}`}>
                    {groups.map((g) => (
                        <li key={g.id}>
                            <UserFamilyCard
                                group={g}
                                leaderLabel={leaderLabel}
                                deputyLabel={deputyLabel}
                                membersLabel={membersLabel}
                            />
                        </li>
                    ))}
                </ul>
            )}
        </section>
    )
}