const PLANS = [
  { name: "Starter", price: "$0", colors: ["#0ea5e9", "#1e3a8a"] },
  { name: "Pro", price: "$12", colors: ["#f43f5e", "#7c2d12"] },
  { name: "Team", price: "$29", colors: ["#22c55e", "#14532d"] },
];

export default function App() {
  const [picked, setPicked] = useState(1);

  return (
    <SkiaLayout Type="Row" Spacing={16} HorizontalOptions="Center" VerticalOptions="Center">
      {PLANS.map((plan, i) => (
        <SkiaShape
          key={plan.name}
          Type="Rectangle"
          CornerRadius={18}
          WidthRequest={150}
          HeightRequest={190}
          StrokeWidth={picked === i ? 2 : 0}
          StrokeColor="#67e8f9"
          FillGradient={{ Colors: plan.colors, Angle: 135 }}
          Tapped={() => setPicked(i)}
        >
          <SkiaLayout Type="Column" Spacing={8} HorizontalOptions="Center" VerticalOptions="Center">
            <SkiaLabel Text={plan.name} FontSize={18} TextColor="#e6edf6" HorizontalOptions="Center" />
            <SkiaLabel Text={plan.price} FontSize={34} TextColor="#ffffff" HorizontalOptions="Center" />
            <SkiaLabel Text={picked === i ? "selected" : "tap to pick"}
                       FontSize={13} TextColor="#cbd5e1" HorizontalOptions="Center" />
          </SkiaLayout>
        </SkiaShape>
      ))}
    </SkiaLayout>
  );
}