'use client';

import { Pin } from 'lucide-react';
import { cn } from '@/lib/utils';

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

export function ChatPinnedMessageBanner({ senderName, preview, className, onClick }: ChatPinnedMessageBannerProps) {
  return (
    <button
      type="button"
      className={cn(
        'flex w-full items-center gap-3 border-b border-[#dce3ec] bg-white/95 px-4 py-2 text-left shadow-[0_8px_20px_rgba(31,36,48,0.06)] backdrop-blur transition hover:bg-[#f7f9fc]',
        className
      )}
      onClick={onClick}
    >
      <span className="h-10 w-1 shrink-0 rounded-full bg-[#3390ec]" aria-hidden />
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-[#3390ec]/10 text-[#3390ec]">
        <Pin className="h-4 w-4" />
      </span>
      <span className="min-w-0 flex-1">
        <span className="block text-sm font-semibold text-[#3390ec]">Закреплённое сообщение</span>
        <span className="block truncate text-sm text-[#1f2430]">
          <span className="font-medium">{senderName}: </span>
          {preview || 'Сообщение'}
        </span>
      </span>
    </button>
  );
}