"use client";

import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { ArrowRightIcon, ShieldCheckIcon } from "@heroicons/react/24/outline";
import type { VpnCatalogProduct } from "@customer-portal/domain/catalog";
import { CardPricing } from "@/features/catalog/components/base/CardPricing";

interface VpnPlanCardProps {
  plan: VpnCatalogProduct;
}

export function VpnPlanCard({ plan }: VpnPlanCardProps) {
  return (
    <AnimatedCard className="p-6 border border-blue-200 hover:border-blue-300 transition-all duration-300 hover:shadow-lg flex flex-col h-full">
      {/* Header with icon and name */}
      <div className="flex items-start gap-3 mb-4">
        <div className="p-2 bg-blue-50 rounded-lg">
          <ShieldCheckIcon className="h-6 w-6 text-blue-600" />
        </div>
        <div className="flex-1">
          <h3 className="text-xl font-semibold text-gray-900">{plan.name}</h3>
        </div>
      </div>

      {/* Pricing */}
      <div className="mb-6">
        <CardPricing monthlyPrice={plan.monthlyPrice} size="lg" alignment="left" />
      </div>

      {/* Action Button */}
      <div className="mt-auto">
        <Button
          as="a"
          href={`/catalog/vpn/configure?plan=${plan.sku}`}
          className="w-full"
          rightIcon={<ArrowRightIcon className="w-4 h-4" />}
        >
          Configure Plan
        </Button>
      </div>
    </AnimatedCard>
  );
}

export type { VpnPlanCardProps };
