import { EyeOff, Home, Search } from "lucide-react";
import { Button } from "~/components/ui/button";
import { useNavigate } from "@remix-run/react";

export const InactiveProductView = () => {
  const navigate = useNavigate();

  return (
    <div className="flex flex-col items-center justify-center p-4 bg-WHITE">
      <div className="flex flex-col items-center gap-6 max-w-md text-center">
        {/* Icon */}
        <div className="w-24 h-24 rounded-full bg-WHITE3 flex items-center justify-center">
          <EyeOff size={48} className="text-BLACK2" />
        </div>

        {/* Title */}
        <h1 className="text-B24 font-bold text-BLACK">محصول غیرفعال است</h1>

        {/* Description */}
        <p className="text-R16 text-BLACK2 leading-relaxed">
          این محصول در حال حاضر توسط فروشنده غیرفعال شده است و امکان خرید آن
          وجود ندارد.
        </p>

        {/* Additional Info */}
        <div className="w-full p-4 bg-WHITE3 rounded-lg">
          <p className="text-R14 text-BLACK2">
            ممکن است این محصول موقتاً موجود نباشد یا فروشنده آن را از فروش خارج
            کرده باشد.
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col gap-3 w-full mt-4">
          <Button
            variant="dark"
            size="lg"
            className="w-full font-bold"
            onClick={() => navigate("/")}
          >
            <Home size={20} />
            بازگشت به صفحه اصلی
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="w-full font-bold"
            onClick={() => navigate("/explore")}
          >
            <Search size={20} />
            جستجوی محصولات دیگر
          </Button>
        </div>
      </div>
    </div>
  );
};