---
interface Props {
  label: string;
  title: string;
  highlight?: string;
  sub?: string;
  center?: boolean;
}

const { label, title, highlight, sub, center = true } = Astro.props;
---

<div class:list={['reveal mb-12', { 'text-center': center }]}>
  <span class="section-label" class:list={[{ 'justify-center': center }]}>{label}</span>
  <h2 class="section-title">
    {title}{highlight && <span class="text-gradient"> {highlight}</span>}
  </h2>
  {sub && <p class:list={['section-sub', { 'mx-auto': center }]}>{sub}</p>}
</div>