1import React, { useState } from 'react';
2
3export default function PricingCard() {
4 const [isYearly, setIsYearly] = useState(false);
5
6 return (
7 <div className="pricing-card">
8 <h3>Pro Plan</h3>
9 <p className="price">
10 ${isYearly ? '99' : '12'}
11 <span className="duration">
12 /{isYearly ? 'year' : 'month'}
13 </span>
14 </p>
15
16 <button onClick={() => setIsYearly(!isYearly)}>
17 Toggle Billing
18 </button>
19
20 <ul className="features">
21 <li>Unlimited Projects</li>
22 <li>Priority Support</li>
23 </ul>
24 </div>
25 );
26}