import { Banner } from "@/components/ui/banner"
import { Eclipse } from "lucide-react"

function BannerUpgrade() {
  return (
    <Banner variant="muted" className="dark text-foreground">
      <div className="w-full">
        <p className="flex items-center justify-center text-sm">
          <Eclipse
            className="-mt-0.5 me-3 inline-flex opacity-60"
            size={16}
            strokeWidth={2}
            aria-hidden="true"
          />
          Get the most out of your app with real-time updates and analytics{" "}
          <span className="text-muted-foreground">·</span>{" "}
          <a href="#" className="font-medium underline hover:no-underline">
            Upgrade
          </a>
        </p>
      </div>
    </Banner>
  )
}

export { BannerUpgrade }