import React from 'react'

export const IconOrchestration = (props) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <rect
      x={15.75}
      y={0.75}
      width={8.5}
      height={8.5}
      rx={1.25}
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <rect
      x={0.75}
      y={30.75}
      width={8.5}
      height={8.5}
      rx={1.25}
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <rect
      x={15.75}
      y={30.75}
      width={8.5}
      height={8.5}
      rx={1.25}
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <rect
      x={30.75}
      y={30.75}
      width={8.5}
      height={8.5}
      rx={1.25}
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <path
      d="M5 27v-4a2 2 0 012-2h26a2 2 0 012 2v4"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
    />
    <rect
      x={19.875}
      y={13.375}
      width={0.75}
      height={7.25}
      rx={0.375}
      fill="currentColor"
      stroke="currentColor"
      strokeWidth={0.75}
    />
  </svg>
)

export const IconDebug = (props) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <rect
      x={0.75}
      y={0.75}
      width={38.5}
      height={38.5}
      rx={1.25}
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <path
      d="M25.5 10.5l3 3L34 8"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M27 27l6 6M33 27l-6 6"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
    />
    <path
      d="M8.103 12.25L12 5.5l3.897 6.75H8.103zM8.103 31.25L12 24.5l3.897 6.75H8.103zM0 19.25h39"
      stroke="currentColor"
      strokeWidth={1.5}
    />
    <rect
      x={7}
      y={14}
      width={10}
      height={1.5}
      rx={0.75}
      fill="currentColor"
    />
    <circle cx={6.755} cy={34.755} r={0.755} fill="currentColor" />
    <circle cx={10.265} cy={34.755} r={0.755} fill="currentColor" />
    <circle cx={13.775} cy={34.755} r={0.755} fill="currentColor" />
    <circle cx={17.285} cy={34.755} r={0.755} fill="currentColor" />
  </svg>
)

export const IconAnalytics = (props) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 39 36"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <mask id="Group_559_svg__a" fill="#fff">
      <rect x={11} y={19} width={6} height={17} rx={1} />
    </mask>
    <rect
      x={11}
      y={19}
      width={6}
      height={17}
      rx={1}
      stroke="currentColor"
      strokeWidth={3}
      mask="url(#Group_559_svg__a)"
    />
    <mask id="Group_559_svg__b" fill="#fff">
      <rect y={24} width={6} height={12} rx={1} />
    </mask>
    <rect
      y={24}
      width={6}
      height={12}
      rx={1}
      stroke="currentColor"
      strokeWidth={3}
      mask="url(#Group_559_svg__b)"
    />
    <mask id="Group_559_svg__c" fill="#fff">
      <rect x={22} y={21} width={6} height={15} rx={1} />
    </mask>
    <rect
      x={22}
      y={21}
      width={6}
      height={15}
      rx={1}
      stroke="currentColor"
      strokeWidth={3}
      mask="url(#Group_559_svg__c)"
    />
    <mask id="Group_559_svg__d" fill="#fff">
      <rect x={33} y={10} width={6} height={26} rx={1} />
    </mask>
    <rect
      x={33}
      y={10}
      width={6}
      height={26}
      rx={1}
      stroke="currentColor"
      strokeWidth={3}
      mask="url(#Group_559_svg__d)"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M3 18.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM3 20a3 3 0 100-6 3 3 0 000 6zM14 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 1.5a3 3 0 100-6 3 3 0 000 6zM25 15.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 1.5a3 3 0 100-6 3 3 0 000 6zM36 4.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM36 6a3 3 0 100-6 3 3 0 000 6z"
      fill="currentColor"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M34.177 3.824l-8.103 8.489c.44.28.762.727.878 1.252l8.31-8.706a2.007 2.007 0 01-1.085-1.035zM23 14c0 .113.01.223.027.331l-7.329-1.274a1.991 1.991 0 00.258-1.478l7.397 1.286A1.99 1.99 0 0023 14zm-10.998-1.915l-7.598 3.453.921 1.229 7.298-3.317a1.995 1.995 0 01-.621-1.365z"
      fill="currentColor"
    />
  </svg>
)

const WhatIsDashboard = () => (
  <div className='what-is-dashboard'>
    <h5>What is the Dashboard?</h5>
    <div className='columns'>
      <div className='column'>
        <IconOrchestration />
        <span>Scale your test runs with built-in orchestration</span>
      </div>
      <div className='column'>
        <IconDebug />
        <span>Debug tests that fail in CI with visual feedback</span>
      </div>
      <div className='column'>
        <IconAnalytics />
        <span>Keep your test suite in tip top shape with analytics</span>
      </div>
    </div>
  </div>
)

export default WhatIsDashboard