import { VNode, toChildArray } from "preact";

export function OL(props: {children?: VNode | VNode[], color?: string;}) {
  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>
  )
}