// frontend/components/dashboard/MiniRow.tsx
import type { CSSProperties } from "react";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";
import type { Tone } from "@/lib/types";

export function MiniRow({
  tone,
  icon,
  text,
  sub,
}: {
  tone: Tone;
  icon: string;
  text: string;
  sub: string;
}) {
  return (
    <div className="mini-row">
      <span className="mini-ic" style={{ "--tone": `var(--${tone})` } as CSSProperties}>
        <Icon name={icon as IconName} />
      </span>
      <span className="mini-text">{text}</span>
      <span className="mini-sub">{sub}</span>
    </div>
  );
}