Subscription plan selector

import 'package:flutter/material.dart';

class Plan {
  const Plan({required this.id, required this.name, required this.monthlyCents, required this.perks});
  final String id;
  final String name;
  final int monthlyCents;
  final List<String> perks;
}

class PlanSelector extends StatefulWidget {
  const PlanSelector({super.key, required this.plans, required this.onSelected, this.yearlyDiscount = 0.2});
  final List<Plan> plans;
  final double yearlyDiscount; // 0.2 means two months free-ish
  final void Function(Plan plan, bool yearly) onSelected;

  @override
  State<PlanSelector> createState() => _PlanSelectorState();
}

class _PlanSelectorState extends State<PlanSelector> {
  bool _yearly = false;
  String? _selected;

  String _price(Plan p) {
    final monthly = _yearly ? p.monthlyCents * (1 - widget.yearlyDiscount) : p.monthlyCents.toDouble();
    return '\$${(monthly / 100).toStringAsFixed(2)} / mo';
  }

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    return Column(children: [
      SegmentedButton<bool>(
        segments: [
          const ButtonSegment(value: false, label: Text('Monthly')),
          ButtonSegment(value: true, label: Text('Yearly (save ${(widget.yearlyDiscount * 100).round()}%)')),
        ],
        selected: {_yearly},
        onSelectionChanged: (s) => setState(() => _yearly = s.first),
      ),
      const SizedBox(height: 12),
      RadioGroup<String>(
        groupValue: _selected,
        onChanged: (id) {
          setState(() => _selected = id);
          widget.onSelected(widget.plans.firstWhere((p) => p.id == id), _yearly);
        },
        child: Column(children: [
          for (final p in widget.plans)
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
                side: BorderSide(color: _selected == p.id ? scheme.primary : scheme.outlineVariant, width: _selected == p.id ? 2 : 1),
              ),
              child: RadioListTile<String>(
                value: p.id,
                title: Text(p.name, style: const TextStyle(fontWeight: FontWeight.bold)),
                subtitle: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  Text(_price(p)),
                  for (final perk in p.perks) Text('• $perk', style: Theme.of(context).textTheme.bodySmall),
                ]),
              ),
            ),
        ]),
      ),
    ]);
  }
}