Bangla date

"use client";

import { Badge, formatBanglaDate, lakhCrore, toBanglaDigits, toBongabdo } from "@waveinno/ui";

export default function BanglaDateDemo() {
  // A fixed day, so the page reads the same everywhere.
  const day = new Date(2026, 11, 16);
  const b = toBongabdo(day);
  const rows: [string, string][] = [
    ["formatBanglaDate(day, { weekday: true })", formatBanglaDate(day, { weekday: true })],
    ['formatBanglaDate(day, { script: "latin" })', formatBanglaDate(day, { script: "latin" })],
    ["toBongabdo(day).season", b.season],
    ["toBanglaDigits(2026)", toBanglaDigits(2026)],
    ["lakhCrore(12500000)", lakhCrore(12500000)],
    ['lakhCrore(320000, { script: "bn" })', lakhCrore(320000, { script: "bn" })],
  ];
  return (
    <div className="grid gap-5 lg:grid-cols-[260px_1fr]">
      <div className="rounded-[18px] bg-[linear-gradient(140deg,var(--brand-1),var(--brand-2))] p-5 text-white">
        <p className="text-[12.5px] text-white/75">16 December 2026</p>
        <p className="disp mt-1 text-[30px] font-bold leading-9 text-white">{formatBanglaDate(day)}</p>
        <Badge className="mt-3 bg-white/20 text-white" dot={false}>
          {b.season} · {b.monthNameLatin}
        </Badge>
      </div>
      <dl className="divide-y divide-border rounded-[16px] border border-border bg-raised">
        {rows.map(([code, out]) => (
          <div key={code} className="flex flex-wrap items-center justify-between gap-2 px-4 py-2.5">
            <dt className="font-mono text-[12px] text-muted">{code}</dt>
            <dd className="text-[14px] font-medium text-text">{out}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}