import React from 'react';
import { useTranslation } from 'react-i18next';
import { DataTableSkeleton } from '@carbon/react';
import { useMetrics } from './dispensing-tiles.resource';
import DispensingTile from './dispensing-tile.component';
import styles from './dispensing-tiles.scss';

const DispensingTiles: React.FC = () => {
  const { t } = useTranslation();
  const { metrics, error, isLoading } = useMetrics();

  if (isLoading) {
    return <DataTableSkeleton role="progressbar" />;
  }

  return (
    <>
      <div className={styles.cardContainer}>
        <DispensingTile
          label={t('orders', 'Orders')}
          value={metrics.orders}
          headerLabel={t('prescriptionsToFillToday', 'Prescriptions to fill today')}
        />
        <DispensingTile
          label={t('today', 'Today')}
          value={metrics.orders_for_home_delivery}
          headerLabel={t('ordersForHomeDelivery', 'Orders for home delivery')}
        />
        <DispensingTile
          label={t('last14Days', 'Last 14 days')}
          value={metrics.missed_collections}
          headerLabel={t('missedCollections', 'Missed collections')}
        />
      </div>
    </>
  );
};

export default DispensingTiles;