import { Accordion } from '@millanbrankovic/styled-ui-library';

// Data example
const data = [
  {
    "title": "Who can I share my membership with?",
    "content": "You can share your membership with up to 5 additional family members at no extra cost (so 6 total, including you). When you create a new family group, you can add or remove other family members. You need paid subscription to do this, then you can use your application without trouble just as long as you pay for it. However keep in mind that you may not be able to renew subscription in new country, so ensure you have enough months. In Free travelling time is limited to 2 weeks."
  },
  {
    "title": "What’s the difference between Premium and Pro membership?",
    "content": "A Pro membership is a storage service. A Premium membership is a subscription plan that gives you more storage to use across our products. Plus, with Premium membership, you get extra benefits and can share your membership with your family. If you have Premium, you can download your music, movies, photos to offline mode, no data used after first download. Offline on home wifi or at library etc. public wifi. If you have Premium and don't want to use Offline or don't have one Premium at all, data usage depends on your Internet connection and your plan/settings."
  },
  {
    "title": "What do I share with my family group? Can they see all my stored stuff?",
    "content": "You can share all the benefits of your membership with your family group — without sharing any of your personal files. Family members share the storage space that comes with your membership plan."
  },
  {
    "title": "Question without an answer",
    "content": ""
  }
]

function DefaultAccordionExample() {
  return (
    <Accordion data={data} />
  );
};

export default DefaultAccordionExample;

import { Accordion } from '@millanbrankovic/styled-ui-library';

function MultiOpenAccordionExample() {
  return (
    <Accordion data={data} multiOpen />
  );
};

export default MultiOpenAccordionExample;

import { Accordion } from '@millanbrankovic/styled-ui-library';

function TitleContentAccordionExample() {
  return (
    <Accordion 
      data={data}
      titleTag='h2'
      titleSize='hSize3'
      contentTag='h3'
      contentSize='hSize4' 
    />
  );
};

export default TitleContentAccordionExample;