"use client";

import React from "react";
import Link from "next/link";
import { useAppSelector } from "@/redux/hooks";

interface SubscriptionCardProps {
  onLoginClick?: () => void;
}

const SubscriptionCard: React.FC<SubscriptionCardProps> = ({ onLoginClick }) => {
  const { user, isAuthenticated } = useAppSelector((state) => state.auth);

  // If the user is already premium, do not render this CTA
  if (user?.isPremium) {
    return null;
  }

  const href = isAuthenticated
    ? "/my-account?current-section=subscription"
    : "/login";

  const handleSubscribeClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    if (!isAuthenticated && onLoginClick) {
      e.preventDefault();
      onLoginClick();
    }
  };

  return (
    <div className="bg-white rounded-2xl px-5 py-4 space-y-3">
      <p className="text-base font-bold text-gray-900">Be a Subscriber</p>
      <p className="text-sm text-gray-500 leading-relaxed">
        Get rid of ads, get the ability to ask a question and much more...
      </p>
      <Link
        href={href}
        onClick={handleSubscribeClick}
        className="inline-block px-4 py-1.5 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white text-xs font-semibold transition-colors cursor-pointer"
      >
        Subscribe
      </Link>
    </div>
  );
};

export default SubscriptionCard;