---
import type { HTMLTag, Polymorphic } from 'astro/types';
import { clsx } from 'clsx';
import { twMerge } from '@/utils/twMerge';

import { shared } from './styles';

type Props<Tag extends HTMLTag = 'ol'> = Polymorphic<{ as: Tag }> & {
  maxWidth?: boolean;
  class?: string;
};

const { as: Tag = 'ol', maxWidth = true, class: className, ...props } = Astro.props;
---

<Tag
  class={twMerge(
    shared.ol,
    clsx("mb-4", maxWidth && "mx-auto max-w-3xl"),
    className,
  )}
  {...props}
>
  <slot />
</Tag>
