Pricing card

"use client";
import styles from "./PricingCard.module.css";
import { useState } from "react";
export default function PricingCard({
  name = "Studio",
  monthly = 32,
  annualMonthly = 26,
  onChoose,
}) {
  const [annual, setAnnual] = useState(false);
  const [selected, setSelected] = useState(false);
  return (
    <div className={styles.root}>
      <div className={styles.head}>
        <span>{name}</span>
        <span className={styles.badge}>For small teams</span>
      </div>
      <button
        type="button"
        className={styles.billing}
        role="switch"
        aria-checked={annual}
        onClick={() => {
          setAnnual(!annual);
          setSelected(false);
        }}
      >
        Annual billing{" "}
        <span aria-hidden="true">
          <i />
        </span>
      </button>
      <div className={styles.price} key={String(annual)}>
        <strong>${annual ? annualMonthly : monthly}</strong>
        <span>/ month</span>
      </div>
      <p>
        {annual
          ? `$${annualMonthly * 12} billed yearly`
          : `$${monthly} billed monthly`}
      </p>
      <ul>
        <li>Shared projects</li>
        <li>Component collections</li>
        <li>Team feedback</li>
      </ul>
      <button
        type="button"
        className={styles.choose}
        onClick={() => {
          setSelected(true);
          onChoose?.({
            name,
            annual,
            amount: annual ? annualMonthly * 12 : monthly,
          });
        }}
      >
        Choose {name}
        <span aria-hidden="true">↗</span>
      </button>
      <small role="status">
        {selected
          ? "Plan selected. Demo only; no purchase made."
          : "Illustrative pricing · no checkout"}
      </small>
    </div>
  );
}