import DescriptionList from '@gravityforms/components/react/admin/elements/DescriptionList';

const groups = [
  {
    terms: {
      component: 'Text',
      props: {
        content: 'Chrome',
        size: 'text-sm',
        weight: 'semibold',
      },
    },
    descriptions: {
      component: 'Text',
      props: {
        content: 'A cross-platform web browser developed by Google.',
        size: 'text-sm',
      },
    },
    wrapper: true,
  },
  {
    terms: {
      component: 'Text',
      props: {
        content: 'Firefox',
        size: 'text-sm',
        weight: 'semibold',
      },
    },
    descriptions: [
      {
        component: 'Text',
        props: {
          content: 'A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.',
          size: 'text-sm',
        },
      },
      {
        component: 'Text',
        props: {
          content: 'The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).',
          size: 'text-sm',
        },
      },
    ],
  },
  {
    terms: [
      {
        component: 'Text',
        props: {
          content: 'Internet Explorer',
          size: 'text-sm',
          weight: 'semibold',
        },
      },
      {
        component: 'Text',
        props: {
          content: 'Netscape',
          size: 'text-sm',
          weight: 'semibold',
        },
      },
    ],
    descriptions: {
      component: 'Text',
      props: {
        content: 'Browsers that have been discontinued.',
        size: 'text-sm',
      },
    },
  },
];

return <DescriptionList groups={ groups } />;