import clsx from "clsx";
import type { FC, HTMLAttributes } from "react";

import styles from "./styles.module.css";

interface InfoItemProps extends HTMLAttributes<HTMLDivElement> {
  label: string;
  inline?: boolean;
}

/**
 * This component is an attribute for a given item, spell, or other entity.
 */

export const InfoItem: FC<InfoItemProps> = ({
  className,
  inline = true,
  label,
  children,
  ...props
}) => (
  <div
    className={clsx([styles.item, inline && styles.inline, className])}
    role="listitem"
    {...props}
  >
    <p className={styles.label}>{label}</p>
    <p className={styles.value}>{children}</p>
  </div>
);