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

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

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

<div class={twMerge(clsx("my-8", maxWidth && "mx-auto max-w-3xl"), outerClass)}>
  <div class="-mx-4 flex overflow-x-auto">
    <div
      class="pointer-events-none sticky left-0 z-10 shrink-0 basis-4 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
      aria-hidden="true"
    >
    </div>
    <Tag class={twMerge("w-full border-collapse", className)} {...props}>
      <slot />
    </Tag>
    <div
      class="pointer-events-none sticky right-0 z-10 shrink-0 basis-4 bg-linear-to-l from-manila-light to-transparent dark:from-faded-black"
      aria-hidden="true"
    >
    </div>
  </div>
</div>
