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

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

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

export function FlexibleDateDisplay({ 
  date, 
  precision = 'day', 
  fallback = 'Unknown',
  className 
}: FlexibleDateDisplayProps) {
  if (!date) {
    return <span className={className || "text-muted-foreground"}>{fallback}</span>;
  }
  
  const dateObj = typeof date === 'string' ? new Date(date) : 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 'day':
    default:
      formatted = format(dateObj, 'PPP');
      break;
  }
  
  return <span className={className}>{formatted}</span>;
}