export function SevenSegmentDigit({ digit }: { digit: string }) {
  const segmentMap: Record<string, string[]> = {
    "0": [
      "top",
      "top-left",
      "top-right",
      "bottom-left",
      "bottom-right",
      "bottom",
    ],
    "1": ["top-right", "bottom-right"],
    "2": ["top", "top-right", "middle", "bottom-left", "bottom"],
    "3": ["top", "top-right", "middle", "bottom-right", "bottom"],
    "4": ["top-left", "top-right", "middle", "bottom-right"],
    "5": ["top", "top-left", "middle", "bottom-right", "bottom"],
    "6": ["top", "top-left", "middle", "bottom-left", "bottom-right", "bottom"],
    "7": ["top", "top-right", "bottom-right"],
    "8": [
      "top",
      "top-left",
      "top-right",
      "middle",
      "bottom-left",
      "bottom-right",
      "bottom",
    ],
    "9": ["top", "top-left", "top-right", "middle", "bottom-right", "bottom"],
  };

  return (
    <div className="relative w-12 h-20 flex flex-col items-center justify-center">
      {/* Define segments */}
      {[
        { name: "top", className: "w-8 h-1 -top-0 left-2" },
        { name: "top-left", className: "w-1 h-8 top-1 left-1" },
        { name: "top-right", className: "w-1 h-8 top-1 right-1" },
        { name: "middle", className: "w-8 h-1 top-9 left-2" },
        { name: "bottom-left", className: "w-1 h-8 bottom-2 left-1" },
        { name: "bottom-right", className: "w-1 h-8 bottom-2 right-1" },
        { name: "bottom", className: "w-8 h-1 bottom-1 left-2" },
      ].map((seg) => (
        <div
          key={seg.name}
          className={`absolute rounded-full ${seg.className} ${
            segmentMap[digit]?.includes(seg.name) ? "bg-black" : "bg-gray-400"
          }`}
        />
      ))}
    </div>
  );
}
