import type { UnitType } from "../../consts/blocksStats";
import Button from "../ui/Button";

function BlockPopup({
  blockStats,
  number,
  onSelect,
}: {
  blockStats: Map<UnitType, number>;
  number: number;
  onSelect: () => void;
}) {
  return (
    <div className="2xl:space-y-[1.667vw] space-y-6 2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] md:max-2xl:rounded-xl rounded-t-2xl bg-white 2xl:w-[18.472vw] md:max-2xl:w-[266px] w-dvw">
      <div className="2xl:space-y-[1.111vw] space-y-4">
        <p className="subheadline-m [font-family:New_York_Large]">
          Block {number}
        </p>
        <hr className="border-[#ECE8DF] 2xl:border-[0.069vw] border-[1px]" />
        <div className="2xl:space-y-[0.556vw] md:space-y-2 max-md:grid grid-cols-2 gap-2">
          {Array.from(blockStats.entries()).map(([unitType, count]) => (
            <div
              key={unitType}
              className="flex 2xl:gap-[0.764vw] gap-[11px] items-center"
            >
              <p className="font-mono bg-[#F47F52] rounded-full aspect-square 2xl:size-[1.389vw] size-5 flex justify-center items-center text-white 2xl:text-[0.972vw]">
                {count}
              </p>
              <p className="text-s text-[#A7A08E]">{unitType}</p>
            </div>
          ))}
        </div>
      </div>
      <Button
        variant="cta"
        size={innerWidth >= 768 ? "medium" : "large"}
        className={"w-full 2xl:hidden"}
        onClick={onSelect}
      >
        Explore
      </Button>
    </div>
  );
}

export default BlockPopup;
