import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import Avatars from "@/components/widgets/Avatars/Avatars";
import { cn } from "@/lib/utils";

interface JoinedTodayWithAvatarsProps extends React.ComponentProps<"div"> {
  avatars?: React.ComponentProps<typeof Avatars>;
  count?: TypographyProps<"span">;
  text?: TypographyProps<"p">;
}

export default function JoinedTodayWithAvatars({
  avatars,
  count,
  text,
  ...props
}: JoinedTodayWithAvatarsProps) {
  return (
    <div
      {...props}
      className={cn(
        "flex flex-col items-center justify-center gap-2",
        props.className
      )}
    >
      {avatars && (
        <Avatars
          generalAvatarProps={{
            className: "size-12 ring-0!",
          }}
          {...avatars}
        />
      )}
      {text && (
        <Typography
          size="sm"
          weight="semiBold"
          font="inter"
          {...text}
          className={cn("text-[#6B7280]", text.className)}
        >
          {count && (
            <Typography
              weight="bold"
              font="inter"
              {...count}
              className={cn(
                "inline-block text-[#6B7280] text-[18px]",
                count.className
              )}
            />
          )}{" "}
          {text.children}
        </Typography>
      )}
    </div>
  );
}