import { Box, SimpleGrid } from "@chakra-ui/react";
import * as React from "react";
import {
  FcDoughnutChart,
  FcMultipleDevices,
  FcPrivacy,
  FcTimeline,
} from "react-icons/fc";
import { Feature } from "./Feature";

export const Features = () => (
  <Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: "6", md: "8" }}>
    <SimpleGrid
      columns={{ base: 1, md: 2 }}
      spacingX="10"
      spacingY={{ base: "8", md: "14" }}
    >
      <Feature title="Secure by default" icon={<FcPrivacy />}>
        Cath will never leak any of your information. Ever. All your data is
        stored securely on our side.
      </Feature>
      <Feature title="Always up to date" icon={<FcTimeline />}>
        Cath is constantly being updated and worked on. Bugs and features, you
        name them, we do them.
      </Feature>
      <Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
        Amazing server statistics that make tracking your server growth a
        breeze.
      </Feature>
      <Feature title="For everyone" icon={<FcMultipleDevices />}>
        No matter who you are, Cath is sure to have a purpose for you.
      </Feature>
    </SimpleGrid>
  </Box>
);