'use client';

import { useSyncExternalStore } from 'react';
import { cn } from '@/lib/utils';

function subscribe() {
  return () => {};
}

function getClientNow() {
  return Date.now();
}

function getServerNow(): number | null {
  return null;
}

export function ShipByCell({
  shipBy,
  status,
}: {
  shipBy: string | null | undefined;
  status: string;
}) {
  const now = useSyncExternalStore(subscribe, getClientNow, getServerNow);

  if (!shipBy) return <span className="text-ink/40">—</span>;

  if (
    status === 'shipped' ||
    status === 'delivered' ||
    status === 'cancelled' ||
    status === 'refunded'
  ) {
    return (
      <span className="text-ink/60">
        {new Date(shipBy).toLocaleDateString()}
      </span>
    );
  }

  const due = new Date(shipBy).getTime();
  const msPerDay = 86_400_000;
  const days = now === null ? null : Math.floor((due - now) / msPerDay);
  const tone =
    days === null
      ? 'text-ink/60'
      : days < 0
        ? 'text-terracotta'
        : days <= 1
          ? 'text-amber-700'
          : 'text-forest/70';

  return (
    <span className={cn('font-medium', tone)}>
      {new Date(shipBy).toLocaleDateString()}
    </span>
  );
}