import React from "react";

/**
 * Renders a proper stacked fraction with numerator above denominator.
 * Usage: <Frac n="x² − 1" d="x² − 2x + 1" />
 */
export const Frac = ({ n, d }: { n: React.ReactNode; d: React.ReactNode }) => (
  <span
    style={{
      display: "inline-flex",
      flexDirection: "column",
      alignItems: "center",
      verticalAlign: "middle",
      lineHeight: 1.25,
      margin: "0 3px",
    }}
  >
    <span
      style={{ borderBottom: "1.5px solid currentColor", padding: "0 4px 2px" }}
    >
      {n}
    </span>
    <span style={{ padding: "2px 4px 0" }}>{d}</span>
  </span>
);