'use client';

import { Pencil, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface ChatMessageEditBannerProps {
  preview?: string;
  onCancel: () => void;
}

export function ChatMessageEditBanner({ preview, onCancel }: ChatMessageEditBannerProps) {
  return (
    <div className="mb-2 flex items-center gap-3 rounded-xl border border-[#3390ec]/20 bg-[#eef4ff] px-3 py-2 animate-in fade-in slide-in-from-bottom-1 duration-200">
      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#3390ec]/15 text-[#3390ec]">
        <Pencil className="h-4 w-4" />
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium text-[#3390ec]">Редактирование сообщения</p>
        {preview ? <p className="truncate text-xs text-[#667085]">{preview}</p> : null}
      </div>
      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0 rounded-lg" aria-label="Отменить редактирование" onClick={onCancel}>
        <X className="h-4 w-4" />
      </Button>
    </div>
  );
}