<template>
  <section class="packages-section" aria-labelledby="packages-title">
    <h2 id="packages-title" class="section-title">
      <v-icon icon="mdi-package-variant" size="24" class="title-icon" />
      Packages
    </h2>

    <PackageFilters />

    <PackageTable />
  </section>
</template>

<script lang="ts" setup>
import PackageFilters from '@/components/Packages/PackageFilters.vue'
import PackageTable from '@/components/Packages/PackageTable.vue'
</script>

<style scoped>
.packages-section {
  margin-top: var(--space-6);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.title-icon {
  color: var(--color-brand-primary);
}

@media (max-width: 600px) {
  .section-title {
    font-size: var(--font-size-lg);
  }
}
</style>
