import React from "react";
import { Text } from "@arc-ui/components/Text";
import { Icon } from "@arc-ui/components/Icon";
import styles from "./ContentInfoWidget.module.css";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

export const ContentInfoWidget: React.FC<ContentInfoWidgetProps> = ({
  text,
  icon,
  ...props
}) => {
  return (
    <div className={styles.container} {...filterAttrs(props)}>
      <div className={styles.icon}>
        <Icon size={20} icon={icon} />
      </div>
      <div className={styles.text}>
        <Text size="xs" tone="muted">
          {text}
        </Text>
      </div>
    </div>
  );
};

export interface ContentInfoWidgetProps {
  icon: string;
  text: string;
}