---
import { isAssetIcon } from "../../theme/icon-kind.ts";
import { hasIcon } from "../../theme/icons.ts";
import Icon from "../Icon.astro";

interface Props {
  icon?: string;
  title?: string;
}

const { icon, title } = Astro.props;
const markerClass =
  "absolute top-0 -start-[2.75rem] flex size-6 items-center justify-center rounded-full bg-accent text-center font-semibold text-accent-foreground text-xs";
const canRenderIcon =
  icon !== undefined && (isAssetIcon(icon) || hasIcon(icon));
---

<div
  class="relative [counter-increment:blume-step]"
>
  <span class:list={[markerClass, !canRenderIcon && "before:[content:counter(blume-step)]"]}>
    {canRenderIcon && <Icon name={icon} size={14} />}
  </span>
  {
    // Consumes the `titleSize` variables set by <Steps>; the fallbacks match
    // its "p" default (and the prose-inherited sizing) so a bare <Step>
    // renders identically.
    title && (
      <p class="mb-1.5 font-semibold text-[length:var(--blume-step-title-size,1rem)] leading-[var(--blume-step-title-line-height,1.75rem)]">
        {title}
      </p>
    )
  }
  <div class="[&>:first-child]:mt-0! [&>:last-child]:mb-0!">
    <slot />
  </div>
</div>