---
// Get heading and content from Astro props
const { heading, content } = Astro.props;
// Define TypeScript interface for props
interface Props {
  heading?: string;
  content?: string;
}
// Define classes for heading and content
const headingClasses =
  'text-balance text-lg font-bold text-neutral-800 dark:text-neutral-200';
const contentClasses =
  'mt-1 text-pretty text-neutral-700 dark:text-neutral-300';
---

{/* The root container that arranges your slot and the heading/content */}
<div class="flex gap-x-5">
  {/* Slot to allow for extensibility of the component */}
  <div class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-neutral-200/80 text-orange-500 dark:bg-white/[0.06] dark:text-orange-300 [&>svg]:!m-0 [&>svg]:!size-6 [&>svg]:!shrink-0 [&>svg]:!fill-current">
    <slot />
  </div>
  <div class="grow">
    {/* Heading of the section */}
    <h3 class={headingClasses}>
      {heading}
    </h3>
    {/* Content text of the section */}
    <p class={contentClasses}>{content}</p>
  </div>
</div>