What's New

"use client";

import { WhatsNew } from "@/components/premium/whats-new";
import { cn } from "@/lib/utils";

const ROWS = ["w-2/3", "w-1/2", "w-3/5", "w-2/5"];
const STATS = ["first", "second", "third"];

/** Quiet app canvas so the teaser lands in the corner of a product view. */
export function WhatsNewPreview() {
  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-8">
      <div className="relative min-h-144 w-full overflow-clip rounded-3xl border border-border bg-background">
        <div aria-hidden className="flex flex-col gap-6 p-4 sm:p-8">
          <div className="flex items-center justify-between gap-3">
            <div className="flex items-center gap-2.5">
              <span className="size-7 rounded-full bg-muted" />
              <span className="text-sm font-medium">Northwind</span>
            </div>
            <div className="flex gap-2">
              <span className="h-8 w-20 rounded-full border border-border" />
              <span className="size-8 rounded-full border border-border" />
            </div>
          </div>
          <div className="space-y-2">
            <div className="h-3 w-40 rounded-full bg-muted" />
            <div className="h-2 w-64 max-w-full rounded-full bg-muted/70" />
          </div>
          <div className="grid gap-3 sm:grid-cols-3">
            {STATS.map((key) => (
              <div
                key={key}
                className="space-y-3 rounded-2xl border border-border p-4"
              >
                <div className="h-2 w-1/3 rounded-full bg-muted" />
                <div className="h-5 w-1/2 rounded-full bg-muted/70" />
              </div>
            ))}
          </div>
          <div className="space-y-3 rounded-2xl border border-border p-4">
            {ROWS.map((width) => (
              <div key={width} className="flex items-center gap-3">
                <span className="size-6 shrink-0 rounded-full bg-muted" />
                <div className={cn("h-2 rounded-full bg-muted/70", width)} />
              </div>
            ))}
          </div>
        </div>
        <WhatsNew teaserPlacement="bottom-right" defaultOpen={false} />
      </div>
    </div>
  );
}