import { FC } from "react";

export const DiceChart: FC<{ dice: Record<string, number> }> = ({ dice }) => {
  const data = Object.entries(dice).sort((a, b) => Number(a[0]) - Number(b[0]));

  const max = Math.max(...data.map((d) => d[1]));
  const _min = Math.min(...data.map((d) => d[1]));

  const uniqueValues = Array.from(new Set(data.map((d) => d[1])));

  return (
    <div className="p-8 bg-black/30 rounded-md max-w-[35rem]">
      <div className="relative flex px-2 gap-1 justify-around items-end h-48 border-b border-l">
        <div className="absolute inset-0 flex flex-col-reverse">
          {uniqueValues.map((_, i) => (
            <div
              key={"dicechartline" + i}
              className="relative w-full border-t border-mixed-300/50 flex-grow"
            >
              {/* <div className="absolute right-full text-xs flex items-center -translate-y-1/2">
                <span>
                  {Math.round(max / uniqueValues.length) * (i + 1)} {}
                </span>
                <div className="border-b w-1 ml-1"></div>
              </div> */}
            </div>
          ))}
        </div>
        {data.map((d) => (
          <div
            key={"dice" + d[0]}
            title={d[0] + ": " + d[1]}
            className="flex-grow px-[1px] border hover:border-mixed-300/50 border-transparent h-full flex transition-colors rounded-md @container"
          >
            <div
              className="bg-purple-800 relative rounded-t-sm w-full mt-auto"
              style={{ height: (d[1] / max) * 100 + "%" }}
            >
              <span className="absolute top-full left-1/2 -translate-x-1/2 text-xs @[.75rem]:inline hidden">
                {d[0]}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};