react code Convert number to Roman numeral

import React, { useState } from "react";

// Convert number to Roman numeral

const toRoman = (num) => {

  const romanMap = [

    [1000, "M"], [900, "CM"], [500, "D"], [400, "CD"],

    [100, "C"], [90, "XC"], [50, "L"], [40, "XL"],

    [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"]

  ];

  let result = "";

  for (const [value, numeral] of romanMap) {

    while (num >= value) {

      result += numeral;

      num -= value;

    }

  }

  return result;

};

const RomanDateFormatter = () => {

  const [input, setInput] = useState("");

  const [output, setOutput] = useState([]);

  const [isVertical, setIsVertical] = useState(true); // layout toggle

  const handleProcess = () => {

    const dates = input.split(",").map(date => date.trim()).filter(Boolean);

    const totalCounts = {};

    const currentCounts = {};

    const result = [];

    // Count total appearances

    dates.forEach(date => {

      totalCounts[date] = (totalCounts[date] || 0) + 1;

    });

    // Format with Roman numerals

    dates.forEach(date => {

      currentCounts[date] = (currentCounts[date] || 0) + 1;

      if (totalCounts[date] === 1) {

        result.push(date);

      } else {

        result.push(`${date}-${toRoman(currentCounts[date])}`);

      }

    });

    setOutput(result);

  };

  return (

    <div style={{ fontFamily: "Times New Roman, serif", padding: "20px" }}>

      <h2>Roman Date Formatter</h2>

      <textarea

        rows="4"

        cols="50"

        placeholder="Enter dates like 01/04/25, 02/04/25, ..."

        value={input}

        onChange={(e) => setInput(e.target.value)}

      />

      <br />

      <button onClick={handleProcess} style={{ marginTop: "10px", marginRight: "10px" }}>

        Format Dates

      </button>

      <button onClick={() => setIsVertical(!isVertical)} style={{ marginTop: "10px", }}>

        Toggle Layout ({isVertical ? "Vertical" : "Horizontal"})

      </button>

      {output.length > 0 && (

        <div

        style={{

            marginTop: "20px",

            display: "flex",

            flexDirection: isVertical ? "column" : "row",

            gap: "10px",

            flexWrap: "wrap",

            justifyContent: "center", // Center items horizontally

            alignItems: "center",     // Center items vertically

            textAlign: "center",

            width: "100%",            // Ensures full-width container

          }}

       

        >

          <h3 style={{ width: "100%" }}>Output:</h3>

          {output.map((item, index) => (

            <div key={index}  

             style={{

                marginTop: "20px",

                display: "flex",

                flexDirection: isVertical ? "column" : "row",

                gap: "10px",

                flexWrap: "wrap",

                alignItems: "center",

                justifyContent: "center", // Center horizontally

                textAlign: "center", // Optional: center text

              }}

            >

              {item}

            </div>

          ))}

        </div>

      )}

    </div>

  );

};

export default RomanDateFormatter;