import React from "react";
import { Tabs, Tab } from "../../";

export default (
  <div className="m-5">
    <Tabs defaultActiveKey="#profile">
      <Tab title="Home" href="#home">
        1: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Profile" href="#profile">
        2: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Contact" isDisabled={true} href="#contact">
        3: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
    </Tabs>
    <Tabs defaultActiveKey="profile" className="mt-5">
      <Tab title="Home" eventKey="home">
        1: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Profile" eventKey="profile">
        2: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Contact" eventKey="contact">
        3: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
    </Tabs>
    <Tabs
      data-testid="my"
      defaultActiveKey="profile"
      className="mt-5 mb-3"
      variant="pills"
      onSelect={(e, eventKey) => alert(eventKey)}
      tabContentClassName="bg-primary"
    >
      <Tab
        title="Home"
        eventKey="home"
        className="bg-warning rounded"
        navLinkClassName="font-weight-bold"
      >
        1: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Profile" eventKey="profile" tabPaneClassName="text-white">
        2: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
      <Tab title="Contact" eventKey="contact">
        3: Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam
        sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est
        eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in
        occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim
        et cillum eu deserunt excepteur ea incididunt minim occaecat.
      </Tab>
    </Tabs>
  </div>
);
