// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";
import { bundleIcon } from "@fluentui/react-icons";
import { CalendarMonthFilled } from "@fluentui/react-icons";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { TabList } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        alignItems: 'flex-start',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        padding: '50px 20px',
        rowGap: '20px',
    },
});

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export const IconOnly = (): JSXElement => {
    const styles = useStyles();
    const renderTabs = () => {
        return (<>
        <Tab icon={<CalendarMonth />} value="tab1" aria-label="First Tab"/>
        <Tab icon={<CalendarMonth />} value="tab2" aria-label="Second Tab"/>
        <Tab icon={<CalendarMonth />} value="tab3" aria-label="Third Tab"/>
        <Tab icon={<CalendarMonth />} value="tab4" aria-label="Fourth Tab"/>
      </>);
    };
    return (<div className={styles.root}>
      <TabList defaultSelectedValue="tab2">{renderTabs()}</TabList>
      <TabList defaultSelectedValue="tab2" vertical>
        {renderTabs()}
      </TabList>
    </div>);
};

export default IconOnly;