'use client';

import { AlertCircle, Clock, CheckCircle } from 'lucide-react';

interface PointExpiryWarningProps {
  expiryDate: string;
  expiryDateFormatted: string;
  daysUntilExpiry: number;
  isExpired: boolean;
  expiryWarning: boolean;
}

export function PointExpiryWarning({
  expiryDate,
  expiryDateFormatted,
  daysUntilExpiry,
  isExpired,
  expiryWarning,
}: PointExpiryWarningProps) {
  if (isExpired) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-3">
        <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
        <div className="flex-1">
          <p className="text-red-800 font-semibold text-sm">Point Anda telah expired</p>
          <p className="text-red-600 text-xs mt-1">
            Point telah direset menjadi 0 pada {expiryDateFormatted}
          </p>
        </div>
      </div>
    );
  }

  if (expiryWarning) {
    return (
      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-3">
        <Clock className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
        <div className="flex-1">
          <p className="text-yellow-800 font-semibold text-sm">
            Point akan expired dalam {daysUntilExpiry} hari
          </p>
          <p className="text-yellow-600 text-xs mt-1">
            Gunakan point Anda sebelum {expiryDateFormatted}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-start gap-3">
      <CheckCircle className="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" />
      <div className="flex-1">
        <p className="text-blue-800 text-xs">
          Point valid hingga: <strong>{expiryDateFormatted}</strong>
        </p>
      </div>
    </div>
  );
}