import { Badge } from '@/components/ui/badge';
import { Clock } from 'lucide-react';
import { toEST } from '@/lib/timezoneUtils';

export function PublicFormSubmissionTimeDisplay({ timeData }) {
  if (!timeData) return <span className="text-muted-foreground">-</span>;

  if (typeof timeData === 'string') {
    return (
      <div className="flex items-center gap-1.5 font-mono text-sm">
        <Clock className="w-3.5 h-3.5 text-muted-foreground" />
        <span>{timeData}</span>
        <Badge variant="outline" className="text-[10px] h-5 px-1 ml-1">EST</Badge>
      </div>
    );
  }

  const { time, timezone, utc_time } = timeData;

  if (!time) return <span className="text-muted-foreground">-</span>;

  return (
    <div className="space-y-1">
      <div className="flex items-center gap-1.5 font-medium">
        <Clock className="w-4 h-4 text-primary" />
        <span>{time}</span>
        <Badge variant="secondary" className="text-[10px] h-5 px-1.5">
          {timezone || 'EST'}
        </Badge>
      </div>
      {utc_time && (
        <div className="text-xs text-muted-foreground pl-6">
          UTC: {toEST(utc_time, 'HH:mm')}
        </div>
      )}
    </div>
  );
}

export default PublicFormSubmissionTimeDisplay;
