import { FunctionComponent, toChildArray } from "preact";

export const OL: FunctionComponent<{ color?: string }> = (props) => {
  const childs = toChildArray(props.children);
  props.color = props.color || "bg-sky";
  return (
    <ol>
      {childs.map((c, i) => (
        <li class="flex gap-4 p-1 even:bg-black/10">
          <div
            class={`w-16 h-16 relative p-2 ${props.color} rounded-md text-white`}
          >
            <span class="text-6xl font-pixel absolute -bottom-1 right-0 text-smoke-800/30">
              {i + 1}
            </span>
            <span class="text-5xl font-pixel">{i + 1}</span>
          </div>
          {c}
        </li>
      ))}
    </ol>
  );
};