import { PlanCard } from '../src/PlanCard';
import { React } from '../src/Svg/index';

export const PlanCardsSection = () => {
  return <>
      <h2 className="mb-4">Plan Cards</h2>
      <div className="container p-0">
          <div className="row">
              <div className="col">
                  <PlanCard
                      fullWidth
                      selectPlan={(id) => console.log("you selected plan", id)}
                      plan={{
                          title: "Pro",
                          id: 1,
                          productID: 1,
                          price: 9.99,
                          highlightFeatures: [
                              {
                                  term_id: 1,
                                  name: "24/7 Professional Monitoring",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                              {
                                  term_id: 2,
                                  name: "Level 1 immediate Police Response request",
                                  description: "Level 1 immediate Police Response request",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                              {
                                  term_id: 3,
                                  name: "Annual Engineer Visit",
                                  description: "Level 1 immediate Police Response request",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          features: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "Annual Engineer Visit",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          allFeatures: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                      }}
                  />
              </div>
              <div className="col">
                  <PlanCard
                      fullWidth
                      selectPlan={(id) => console.log("you selected plan", id)}
                      plan={{
                          title: "Smart",
                          id: 1,
                          productID: 1,
                          price: 10,
                          highlightFeatures: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          features: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          allFeatures: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                      }}
                  />
              </div>
              <div className="col">
                  <PlanCard
                      fullWidth
                      selectPlan={(id) => console.log("you selected plan", id)}
                      plan={{
                          title: "Lite",
                          id: 1,
                          productID: 3,
                          price: 0,
                          highlightFeatures: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          features: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                          allFeatures: [
                              {
                                  term_id: 1,
                                  name: "Feature 1",
                                  description: "This is a feature",
                                  svg: "<svg></svg>",
                                  customValue: false,
                              },
                          ],
                      }}
                  />
              </div>
          </div>
      </div>
  </>;
}