"use client"
import { cva } from "class-variance-authority"

import { Lang } from "@/constants/languages"
import { trpc } from "@/lib/trpc/client"

import styles from "./maxWidth.module.css"

import type { MaxWidthProps } from "@/types/components/max-width"

const maxWidthVariants = cva(styles.container)

export default function MaxWidth({
  className,
  tag = "section",
  ...props
}: MaxWidthProps) {
  const d = trpc.contentstack.breadcrumbs.get.useQuery({
    locale: Lang.en,
    href: "/my-pages/overview",
  })
  const Cmp = tag
  return <Cmp className={maxWidthVariants({ className })} {...props} />
}