'use client'

import { ProductCapabilitiesCard } from './_components/product-capabilities-card'
import { GrnTaxCard } from './_components/grn-tax-card'
import { InvoiceCreationModeCard } from './_components/invoice-creation-mode-card'

export default function ConfigurationPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-semibold text-foreground">Configuration</h1>
        <p className="text-sm text-muted-foreground mt-0.5">System-wide settings, grouped by area</p>
      </div>

      <div className="grid grid-cols-12 items-stretch gap-6">
        <div className="col-span-12 flex lg:col-span-6 [&>*]:w-full">
          <ProductCapabilitiesCard />
        </div>
        <div className="col-span-12 flex lg:col-span-6 [&>*]:w-full">
          <GrnTaxCard />
        </div>
        <div className="col-span-12 flex lg:col-span-6 [&>*]:w-full">
          <InvoiceCreationModeCard />
        </div>
      </div>
    </div>
  )
}