import * as React from "react";
import type { SxProps } from "@mui/material/styles";
import Typography from "@mui/material/Typography";

import {
  CardCoverIdx,
  CardCoverJsonColumn,
  CardCoverForeignKey,
  CardCoverDelete,
  CardCoverSelect,
  CardCoverUpdate,
  CardCoverCreate,
} from "@/components/Sections/MysqlCompatible/Icons";

const commonSvgIconSx: SxProps = {
  width: "100%",
  height: "140px",
};

export const cards1 = [
  {
    id: "create",
    type: "Create",
    title: "a new product",
    icon: (
      <CardCoverCreate
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
  {
    id: "select",
    type: "Select",
    title: "products with price > $20",
    icon: (
      <CardCoverSelect
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
  {
    id: "update",
    type: "Update",
    title: "the selling price",
    icon: (
      <CardCoverUpdate
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
  {
    id: "delete",
    type: "Delete",
    title: "the specific product",
    icon: (
      <CardCoverDelete
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
];

export const cards2 = [
  {
    id: "idx",
    title: (
      <Typography gutterBottom>
        Speed Up Query Efficiency with{" "}
        <Typography component="span" fontWeight="bold">
          Index
        </Typography>
      </Typography>
    ),
    titleText: "Speed Up Query Efficiency with Index",
    icon: (
      <CardCoverIdx
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
  {
    id: "json-column",
    title: (
      <Typography gutterBottom>
        Get extra product info from{" "}
        <Typography component="span" fontWeight="bold">
          JSON column
        </Typography>
      </Typography>
    ),
    titleText: "Get extra product info from JSON column",
    icon: (
      <CardCoverJsonColumn
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
  {
    id: "foreign-key",
    title: (
      <Typography gutterBottom>
        Prevent Dirty Data with{" "}
        <Typography component="span" fontWeight="bold">
          Foreign Key
        </Typography>
      </Typography>
    ),
    titleText: "Prevent Dirty Data with Foreign Key",
    icon: (
      <CardCoverForeignKey
        fontSize="inherit"
        sx={{
          ...commonSvgIconSx,
        }}
      />
    ),
  },
];