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

interface JoinedTodayProps extends React.ComponentProps<"div"> {
  icon?: React.ReactNode;
  count?: TypographyProps<"span">;
  text?: TypographyProps<"p">;
}

export default function JoinedToday({
  icon,
  count,
  text,
  ...props
}: JoinedTodayProps) {
  return (
    <div
      {...props}
      className={cn("flex items-center justify-center gap-2", props.className)}
    >
      {icon}
      {count && (
        <Typography
          as="p"
          font="inter"
          weight="bold"
          size="sm"
          align="center"
          {...count}
          className={cn("text-[#6B7280]", count.className)}
        />
      )}
      {text && (
        <Typography
          as="p"
          font="inter"
          size="sm"
          align="center"
          {...text}
          className={cn("text-[#6B7280]", text.className)}
        />
      )}
    </div>
  );
}