Fmt

import Fmt from "@/components/ui/fmt";

export default function FmtDemo() {
  const d = new Date();
  const twoHoursAgo = new Date(d.getTime() - 2 * 60 * 60 * 1000);

  const rows = [
    {
      label: "date · DD.MM.YYYY HH:mm:ss",
      node: <Fmt type="date" value={d} format="DD.MM.YYYY HH:mm:ss" />,
    },
    {
      label: "date · MMMM D, YYYY",
      node: <Fmt type="date" value={d} format="MMMM D, YYYY" />,
    },
    {
      label: "date · Intl long",
      node: <Fmt type="date" value={d} format="long" />,
    },
    {
      label: "number · 2 decimals",
      node: <Fmt type="number" value={1234567.891} decimals={2} />,
    },
    {
      label: "currency · EUR",
      node: <Fmt type="currency" value={1234.5} currency="EUR" />,
    },
    {
      label: "percent",
      node: <Fmt type="percent" value={0.982} decimals={1} />,
    },
    { label: "bytes", node: <Fmt type="bytes" value={748100} /> },
    { label: "duration", node: <Fmt type="duration" value={3792} /> },
    { label: "relative", node: <Fmt type="relative" value={twoHoursAgo} /> },
  ];

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <div className="w-full max-w-sm space-y-3 rounded-lg border border-border bg-card p-6">
        {rows.map((row) => (
          <div
            key={row.label}
            className="flex items-baseline justify-between gap-4 text-sm"
          >
            <span className="text-muted-foreground">{row.label}</span>
            <span className="font-mono tabular-nums text-card-foreground">
              {row.node}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}