thrilltrack-explorer/src/components/ui/flexible-date-display.tsx

import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';
import type { DatePrecision } from './flexible-date-input';

interface FlexibleDateDisplayProps {
  date?: string | Date | null;
  precision?: DatePrecision;
  fallback?: string;
  className?: string;
}

export function FlexibleDateDisplay({ 
  date, 
  precision = 'exact', 
  fallback = 'Unknown',
  className 
}: FlexibleDateDisplayProps) {
  if (!date) {
    return <span className={className || "text-muted-foreground"}>{fallback}</span>;
  }
  
  // ⚠️ IMPORTANT: Use parseDateForDisplay to prevent timezone shifts
  // YYYY-MM-DD strings must be interpreted as local dates, not UTC
  const dateObj = parseDateForDisplay(date);
  
  // Check for invalid date
  if (isNaN(dateObj.getTime())) {
    return <span className={className || "text-muted-foreground"}>{fallback}</span>;
  }
  
  let formatted: string;
  switch (precision) {
    case 'year':
      formatted = format(dateObj, 'yyyy');
      break;
    case 'month':
      formatted = format(dateObj, 'MMMM yyyy');
      break;
    case 'decade':
      formatted = `${Math.floor(dateObj.getFullYear() / 10) * 10}s`;
      break;
    case 'century':
      formatted = `${Math.ceil(dateObj.getFullYear() / 100)}th century`;
      break;
    case 'approximate':
      formatted = `circa ${format(dateObj, 'yyyy')}`;
      break;
    case 'exact':
    default:
      formatted = format(dateObj, 'PPP');
      break;
  }
  
  return <span className={className}>{formatted}</span>;
}