import React from 'react';
import { CheckCircle2, XCircle } from 'lucide-react';

interface FeedbackBannerProps {
  status: 'none' | 'success' | 'error';
  message: string;
}

export const FeedbackBanner: React.FC<FeedbackBannerProps> = ({ status, message }) => {
  if (status === 'none') return null;

  const isSuccess = status === 'success';

  return (
    <div
      className={`rounded-xl p-4 text-xs flex items-center space-x-3 border transition-all ${
        isSuccess
          ? 'bg-[#61B89A]/15 border-[#61B89A]/40 text-[#1B4D3E]'
          : 'bg-[#D45762]/15 border-[#D45762]/40 text-[#731E26]'
      }`}
    >
      {isSuccess ? (
        <CheckCircle2 className="w-5 h-5 text-[#61B89A] shrink-0" />
      ) : (
        <XCircle className="w-5 h-5 text-[#D45762] shrink-0" />
      )}
      <div className="font-medium">{message}</div>
    </div>
  );
};