import { getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';
import { ButtonLink, FilterSelect, PeriodPicker, ReportHeader, presetRange } from '@arbol-ai/ui';

const CHANNELS = [
  { value: 'voice', label: 'Phone' },
  { value: 'whatsapp', label: 'WhatsApp' },
];

const HeaderExample = () => {
  const [period, setPeriod] = useState(() => presetRange(7));
  const [channels, setChannels] = useState<string[]>([]);
  const [isExporting, setIsExporting] = useState(false);
  return (
    <ReportHeader
      actions={
        <ButtonLink href="#/report" variant="ghost">
          See the conversations
        </ButtonLink>
      }
      description="How many conversations did the agents hold, and how did they end?"
      exportLabel="Export CSV"
      filters={
        <>
          <PeriodPicker maxValue={today(getLocalTimeZone())} onChange={setPeriod} value={period} />
          <FilterSelect
            allLabel="All channels"
            label="Channel"
            onChange={setChannels}
            options={CHANNELS}
            value={channels}
          />
        </>
      }
      isExporting={isExporting}
      onExport={() => {
        setIsExporting(true);
        globalThis.setTimeout(() => {
          setIsExporting(false);
        }, 1200);
      }}
      period={period}
      title="Conversations"
    />
  );
};

<HeaderExample />

import { ReportHeader } from '@arbol-ai/ui';

<ReportHeader
  description="Open the question you have; each report reads the same period."
  title="Reports"
/>

import { ReportReading, Stat } from '@arbol-ai/ui';

<div className="grid gap-3 sm:grid-cols-2">
  <Stat label="No-shows" value={41} />
  <ReportReading>
    41 patients missed their appointment (3%) and 64 cancelled (5%). The most common reason: “Forgot”.
  </ReportReading>
</div>