'use client';
import type { GetUsersResult, ProjectAPI } from '@intlayer/backend';
import { Avatar, Button, Container } from '@intlayer/design-system';
import { useGetUsers } from '@intlayer/design-system/hooks';
import { GitBranch } from 'lucide-react';
import type { FC } from 'react';
export interface ProjectCardProps {
project: ProjectAPI;
onSelect: (projectId: string) => void;
selectButtonLabel: string;
selectButtonText: React.ReactNode;
}
export const ProjectCard: FC<ProjectCardProps> = ({
project,
onSelect,
selectButtonLabel,
selectButtonText,
}) => {
// Fetch user data for all members
const { data: usersData, isPending: isLoadingUsers } = useGetUsers(
{
ids: project.membersIds.map(String),
},
{
enabled: project.membersIds.length > 0,
}
);
const users = (usersData as GetUsersResult | undefined)?.data ?? [];
const displayedUsers = users.slice(0, 5);
const remainingCount = users.length - displayedUsers.length;
return (
<Container
roundedSize="xl"
border
borderColor="neutral"
padding="md"
className="gap-4"
>
<h3 className="font-bold text-xl">{project.name}</h3>
{project.repository && (
<div className="flex items-center gap-4">
<div className="flex aspect-square size-12 items-center justify-center rounded-full">
<GitBranch className="size-5" />
</div>
<div className="flex flex-wrap items-center gap-2">
<a
href={project.repository.url}
target="_blank"
rel="noopener noreferrer"
className="block w-full font-medium text-xs underline"
>
{project.repository.owner}/{project.repository.repository}
</a>
<span className="flex items-center gap-1 text-neutral text-xs">
<GitBranch className="size-3" />
{project.repository.branch}
</span>
<span className="rounded bg-text/10 px-2 py-0.5 text-xs">
{project.repository.configFilePath}
</span>
</div>
</div>
)}
{project.membersIds.length > 0 && (
<div className="flex flex-row items-center gap-1">
<div className="flex flex-row -space-x-2">
{displayedUsers.map((user) => (
<Avatar
key={String(user.id)}
src={user.image ?? undefined}
fullname={user.name}
size="sm"
isLoading={isLoadingUsers}
/>
))}
</div>
{remainingCount > 0 && (
<span className="ml-1 text-neutral text-xs">+{remainingCount}</span>
)}
</div>
)}
<Button
onClick={() => onSelect(String(project.id))}
label={selectButtonLabel}
color="text"
className="mt-auto"
>
{selectButtonText}
</Button>
</Container>
);
};
