---
export interface Props {
  component?: any;
  title: string;
  id: string;
  [key: string]: any;
}

const { component: Component = 'h2', title, id, ...rest } = Astro.props;
---

<Component
  class:list={[
    'text-2xl sm:text-3xl md:text-4xl font-bold flex gap-4',
    rest.class,
  ]}
>
  <a
    href={`#${id}`}
    class="scale-90 text-gray-500 border-none pb-0 hover:bg-none hover:pb-0 focus:text-accent hover:text-accent transition-colors duration-200 ease-in-out"
    >#</a
  >{title}
</Component>