"use client";

import { AnimatedCard } from "@/components/molecules";
import { DevicePhoneMobileIcon, UsersIcon } from "@heroicons/react/24/outline";
import type { PlanDisplayProps } from "./types";

function formatPlanType(planType: string): string {
  if (planType === "DataSmsVoice") return "Data + SMS + Voice";
  if (planType === "DataOnly") return "Data Only";
  return "Voice + SMS Only";
}

export function PlanCard({ plan }: PlanDisplayProps) {
  const price = plan.monthlyPrice ?? plan.unitPrice ?? plan.oneTimePrice ?? 0;

  return (
    <AnimatedCard variant="static" className="p-6">
      <div className="flex justify-between items-start">
        <div>
          <div className="flex items-center gap-2 mb-2">
            <DevicePhoneMobileIcon className="h-5 w-5 text-primary" />
            <h3 className="font-bold text-lg text-foreground">{plan.name}</h3>
            {plan.simHasFamilyDiscount && (
              <span className="bg-success-soft text-success text-xs px-2 py-1 rounded-full font-medium flex items-center gap-1">
                <UsersIcon className="h-3 w-3" />
                Family Discount
              </span>
            )}
          </div>
          <div className="flex items-center gap-4 text-sm text-muted-foreground mb-2">
            <span>
              <strong>Data:</strong> {plan.simDataSize}
            </span>
            <span>
              <strong>Type:</strong> {formatPlanType(plan.simPlanType ?? "")}
            </span>
          </div>
        </div>
        <div className="text-right">
          <div className="text-2xl font-bold text-primary">¥{price.toLocaleString()}/mo</div>
          {plan.simHasFamilyDiscount && (
            <div className="text-sm text-success font-medium">Discounted Price</div>
          )}
        </div>
      </div>
    </AnimatedCard>
  );
}
