---

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

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

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

<Tag
  class={twMerge(
    clsx(
      "my-8 border-l border-manila-75 pl-4 dark:border-warm-gray",
      "[&>*:last-child]:mb-0! [&>.my-4]:my-2 [&>.my-8]:my-4",
      maxWidth && "mx-auto max-w-3xl",
    ),
    className,
  )}
  {...props}
>
  <slot />
</Tag>
