"use client";

import type { Plan } from "@/features/billing/hooks/usePlans";
import { Button } from "@/components/ui/Button";

export function PlanCard({ plan, locale }: { plan: Plan; locale: string }) {
  const priceLabel = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: plan.currency
  }).format(plan.price);

  return (
    <article
      style={{
        border: "1px solid rgba(0,0,0,0.08)",
        borderRadius: 20,
        padding: 24,
        display: "grid",
        gap: 16,
        textAlign: "left"
      }}
    >
      <div>
        <h2 style={{ fontSize: "1.5rem", marginBottom: 8 }}>{plan.name}</h2>
        <p style={{ color: "var(--muted)" }}>{plan.description}</p>
      </div>
      <div>
        <strong style={{ fontSize: "2.5rem" }}>{priceLabel}</strong>
        <span style={{ color: "var(--muted)" }}>/month</span>
      </div>
      <ul style={{ display: "grid", gap: 6 }}>
        {plan.features.map((feature) => (
          <li key={feature}>• {feature}</li>
        ))}
      </ul>
      <Button>Choose plan</Button>
    </article>
  );
}
