import { memo } from 'react';

import { cn } from '@djangocfg/ui-core/lib';

import { formatMessageDateLabel } from './messageDate';

export interface MessageDateSeparatorProps {
  timestamp: number;
  timeZone: string;
  locale?: string;
  now?: number;
  className?: string;
}

export const MessageDateSeparator = memo(function MessageDateSeparator({
  timestamp,
  timeZone,
  locale,
  now,
  className,
}: MessageDateSeparatorProps) {
  const label = formatMessageDateLabel(timestamp, { locale, timeZone, now });

  return (
    <div
      role="separator"
      aria-label={label}
      className={cn(
        'flex items-center justify-center px-3 pb-2 pt-5 text-xs font-medium text-muted-foreground',
        className,
      )}
    >
      <time dateTime={new Date(timestamp).toISOString()}>{label}</time>
    </div>
  );
});
