import React from "react";
import { Link } from "react-router-dom";
import { Grid } from "@sc/components/ui";
import CategoryObject from "./CategoryObject";

const GoalGroup = props => {
  const { match } = props;

  const tabId = match.params.tabId;
  const searchStr = match.params.searchStr || "";

  return (
    <div>
      <h2>I want to...</h2>
      <Grid justify="space-between" style={{ paddingBottom: 40 }} wrap>
        <Link to={`/catalog/${tabId}/leads`}>
          <CategoryObject
            searchStr={searchStr}
            label="Capture Leads"
            image=""
            color={theme.altColor[0]}
            description="Lead Capture, Trial Download, Webinar Registrations, Popup, etc."
            animated
          />
        </Link>
        <Link to={`/catalog/${tabId}/sales`}>
          <CategoryObject
            searchStr={searchStr}
            label="Generate Sales"
            image=""
            color={theme.altColor[1]}
            description="Home Page, Video Sales Letter Sequence, Upsell Sequence, Checkout Process, etc."
            animated
          />
        </Link>
        <Link to={`/catalog/${tabId}/event`}>
          <CategoryObject
            searchStr={searchStr}
            label="Host an Event"
            image=""
            color={theme.altColor[2]}
            description="Live Seminar, Live/Evergreen Webinar, Product Launch Formala, etc."
            animated
          />
        </Link>
        <Link to={`/catalog/${tabId}/recover`}>
          <CategoryObject
            searchStr={searchStr}
            label="Save a Sale"
            image=""
            color={theme.altColor[4]}
            description="Shopping Cart Abandonment, Bringing back old customers, etc."
            animated
          />
        </Link>
        <Link to={`/catalog/${tabId}/fulfilment`}>
          <CategoryObject
            searchStr={searchStr}
            label="Fulfill an Order"
            image=""
            color={theme.altColor[3]}
            description="Downloads, Membership Sites, Fulfilment house, etc."
            animated
          />
        </Link>
        <Link to={`/catalog/${tabId}/blank`}>
          <CategoryObject
            searchStr={searchStr}
            label="Start from Scratch"
            image=""
            color={theme.altColor[5]}
            description="Start with an empty canvas"
            animated
          />
        </Link>
      </Grid>
    </div>
  );
};

export default GoalGroup;