import React, { ReactElement } from "react";
import { Tabs as TabsAntd } from "antd";
import { BadgeTab, tabsCss } from "./tabs.styled";
import styled from "styled-components";
const { TabPane: TabPaneAntd } = TabsAntd;

export const TabView = (props: any): React.ReactElement => <StyledTabs {...props} />;

const StyledTabs = styled(TabsAntd)`
  ${tabsCss}
`;

export const Tabs = (props: any): ReactElement => {
  return <TabView {...props} />;
};

export const Badge = ({
  title,
  content,
}: {
  title: string;
  content: string;
}) => {
  return (
    <BadgeTab>
      <span>{title}</span>
      <span className="counter">{content}</span>
    </BadgeTab>
  );
};

Tabs.TabPane = TabPaneAntd;
Tabs.WithBadge = Badge;