'use client';

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

interface RepliedMessagePreviewProps {
  senderName: string;
  preview: string;
  accentClassName?: string;
  onClick?: () => void;
  className?: string;
}

export function RepliedMessagePreview({
  senderName,
  preview,
  accentClassName = 'bg-[#3390ec]',
  onClick,
  className
}: RepliedMessagePreviewProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'mb-2 flex w-full items-stretch gap-2 rounded-xl bg-black/[0.04] px-2 py-1.5 text-left transition hover:bg-black/[0.07]',
        className
      )}
    >
      <span className={cn('w-0.5 shrink-0 rounded-full', accentClassName)} aria-hidden />
      <span className="min-w-0">
        <span className="block truncate text-xs font-semibold text-[#3390ec]">{senderName}</span>
        <span className="block truncate text-xs text-[#667085]">{preview || 'Сообщение'}</span>
      </span>
    </button>
  );
}

export function scrollToChatMessage(messageId: string) {
  const element = document.getElementById(`msg-${messageId}`);
  if (!element) return false;
  element.scrollIntoView({ behavior: 'smooth', block: 'center' });
  element.classList.add('blink-highlight');
  window.setTimeout(() => element.classList.remove('blink-highlight'), 2000);
  return true;
}