Formatting

'use client';

import { formatMoney, formatNumber, type MoneyCurrency } from '@akhatmirzo/core';
import { Button, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const CURRENCIES: MoneyCurrency[] = ["so'm", 'UZS', false];

export default function CoreMoney() {
  const [raw, setRaw] = useState('1250000.5');
  const [currency, setCurrency] = useState<MoneyCurrency>("so'm");
  const n = Number(raw.replace(',', '.').replace(/\s/g, ''));

  const rows = [
    { call: 'formatNumber(n)', value: formatNumber(n) },
    { call: 'formatNumber(n, { decimals: 2 })', value: formatNumber(n, { decimals: 2 }) },
    { call: 'formatMoney(n, { currency })', value: formatMoney(n, { currency }) },
  ];

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Son">
        <Input value={raw} onChange={(e) => setRaw(e.target.value)} inputMode="decimal" />
      </Field>
      <div className="flex flex-wrap items-center gap-2">
        {CURRENCIES.map((c) => (
          <Button
            key={String(c)}
            size="sm"
            variant={currency === c ? 'primary' : 'outline'}
            onClick={() => setCurrency(c)}
          >
            {c === false ? 'false' : c}
          </Button>
        ))}
      </div>
      <dl className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {rows.map((row) => (
          <div key={row.call} className="flex flex-wrap justify-between gap-x-4 gap-y-1 px-3 py-2">
            <dt className="font-mono text-xs text-text-muted">{row.call}</dt>
            <dd className="font-mono font-medium text-text tabular-nums">{row.value || "''"}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

'use client';

import { formatCardNumber, formatPhone } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const digitsOf = (s: string) => s.replace(/\D/g, '');

export default function CorePhoneCard() {
  const [phone, setPhone] = useState('90123');
  const [card, setCard] = useState('8600 1234');

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Telefon" description={`formatPhone: ${formatPhone(phone) || '—'}`}>
        <Input
          prefix="+998"
          value={formatPhone(phone, 'national')}
          onChange={(e) => setPhone(digitsOf(e.target.value).slice(0, 9))}
          inputMode="tel"
          placeholder="(90) 123-45-67"
        />
      </Field>
      <Field label="Karta raqami" description={`Toza qiymat: ${digitsOf(card) || '—'}`}>
        <Input
          value={card}
          onChange={(e) => setCard(formatCardNumber(digitsOf(e.target.value).slice(0, 16)))}
          inputMode="numeric"
          placeholder="0000 0000 0000 0000"
        />
      </Field>
    </div>
  );
}

'use client';

import { formatDate, parseDate } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const PATTERNS = ['dd.MM.yyyy', 'd MMMM yyyy, EEEE', 'd MMM, EEE', 'EEEE, d MMMM [soat] HH:mm'];
const DATE = new Date(2026, 9, 21, 14, 30);

export default function CoreDate() {
  const [pattern, setPattern] = useState('d MMMM yyyy, EEEE');
  const [input, setInput] = useState('31.02.2026');
  const parsed = parseDate(input);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field
        label="Shablon"
        description={`formatDate(sana, shablon) → ${formatDate(DATE, pattern)}`}
      >
        <Input value={pattern} onChange={(e) => setPattern(e.target.value)} />
      </Field>
      <div className="flex flex-wrap gap-2">
        {PATTERNS.map((p) => (
          <button key={p} type="button" onClick={() => setPattern(p)} className="cursor-pointer">
            <Badge variant="outline">{p}</Badge>
          </button>
        ))}
      </div>
      <Field
        label="parseDate (dd.MM.yyyy)"
        description={parsed ? formatDate(parsed, 'EEEE, d MMMM yyyy') : "null — bunday sana yo'q"}
      >
        <Input value={input} onChange={(e) => setInput(e.target.value)} invalid={!parsed} />
      </Field>
    </div>
  );
}

'use client';

import { timeAgo } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const MINUTE = 60_000;
const NOW = new Date(2026, 9, 21, 12, 0);
const OFFSETS = [5, 180, 1440, 4320, 20160, 136800, -120, -1440];

export default function CoreTimeAgo() {
  const [minutes, setMinutes] = useState('90');
  const custom = new Date(NOW.getTime() - Number(minutes || 0) * MINUTE);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Necha daqiqa oldin" description={`timeAgo → ${timeAgo(custom, NOW)}`}>
        <Input
          value={minutes}
          onChange={(e) => setMinutes(e.target.value.replace(/[^\d-]/g, ''))}
          inputMode="numeric"
          suffix="daqiqa"
        />
      </Field>
      <ul className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {OFFSETS.map((m) => (
          <li key={m} className="flex justify-between gap-4 px-3 py-2">
            <span className="font-mono text-xs text-text-muted">{m} daqiqa</span>
            <span className="text-text">{timeAgo(NOW.getTime() - m * MINUTE, NOW)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

'use client';

import { moneyToWords, numberToWords, ordinalWords } from '@akhatmirzo/core';
import { Field, Input, SegmentedControl } from '@akhatmirzo/ui';
import { useState } from 'react';

type Script = 'latin' | 'cyrillic';

export default function CoreNumberWords() {
  const [raw, setRaw] = useState('1250000.50');
  const [script, setScript] = useState<Script>('latin');
  const n = Number(raw.replace(',', '.').replace(/\s/g, ''));

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Summa">
        <Input value={raw} onChange={(e) => setRaw(e.target.value)} inputMode="decimal" />
      </Field>
      <SegmentedControl
        aria-label="Alifbo"
        value={script}
        onValueChange={(v) => setScript(v as Script)}
      >
        <SegmentedControl.Item value="latin">Lotin</SegmentedControl.Item>
        <SegmentedControl.Item value="cyrillic">Кирилл</SegmentedControl.Item>
      </SegmentedControl>
      <dl className="grid gap-2 text-sm">
        <dt className="font-mono text-xs text-text-muted">numberToWords</dt>
        <dd>{numberToWords(n, { script }) || '—'}</dd>
        <dt className="font-mono text-xs text-text-muted">moneyToWords</dt>
        <dd>{moneyToWords(n, { script }) || '—'}</dd>
        <dt className="font-mono text-xs text-text-muted">ordinalWords</dt>
        <dd>{ordinalWords(n, { script }) || '—'}</dd>
      </dl>
    </div>
  );
}

'use client';

import { formatDateRange, formatDateUz, formatDuration } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const STYLES = ['long', 'full', 'short', 'dayMonth', 'monthYear'] as const;

export default function CoreDateUz() {
  const [value, setValue] = useState('2026-10-22');
  const [y = 2026, m = 10, d = 22] = value.split('-').map(Number);
  const date = new Date(y, m - 1, d, 14, 30);
  const end = new Date(y, m - 1, d + 3);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Sana">
        <Input type="date" value={value} onChange={(e) => setValue(e.target.value)} />
      </Field>
      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
        {STYLES.map((style) => (
          <div key={style} className="contents">
            <dt className="font-mono text-xs text-text-muted">{style}</dt>
            <dd>{formatDateUz(date, { style })}</dd>
          </div>
        ))}
        <dt className="font-mono text-xs text-text-muted">kirill</dt>
        <dd>{formatDateUz(date, { style: 'full', script: 'cyrillic' })}</dd>
        <dt className="font-mono text-xs text-text-muted">+3 kun</dt>
        <dd>{formatDateRange(date, end)}</dd>
        <dt className="font-mono text-xs text-text-muted">davomiylik</dt>
        <dd>{formatDuration(end.getTime() - date.getTime(), { units: 3 })}</dd>
      </dl>
    </div>
  );
}