import { FiBell } from "react-icons/fi";

type Props = {
  title: string;
  description: string;
};

const NotificationItem = ({ title, description }: Props) => {
  return (
    <div className="flex gap-4 items-center bg-[#F1F5F9] rounded-xl p-4 shadow-sm border border-slate-50 transition-all hover:bg-[#E9F0F7] group">
      <div className="bg-[#E2E8F0] rounded-xl p-3 flex items-center justify-center shadow-inner group-hover:bg-[#D1D9E4] transition-colors order-1">
        <FiBell size={24} strokeWidth={1.5} className="text-[#1D293D]" />
      </div>
      <div className="flex-1 order-2">
        <p className="font-bold text-lg text-[#1D293D] mb-0.5 leading-tight">{title}</p>
        <p className="text-[#45556C] text-sm font-medium leading-relaxed opacity-90">{description}</p>
      </div>
    </div>
  );
}

export default NotificationItem