import React, { useState } from 'react';
import './tabs.css';
import Iconsvg from '../../Ui/Icon/Icon'

type tabsContent = {
    title: string,
    content: string,
    iconName: any
}

type Props = {
    defaultTab: number,
    icon?: boolean,
    tabLabel?: boolean,
    type: 'default' | 'boxed'
}

const tabs:tabsContent[]=[
    { title: "Tab 1", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 1", iconName: 'date' },
    { title: "Tab 2", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 2", iconName: 'date'},
    { title: "Tab 3", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 3", iconName: 'date' },
    { title: "Tab 4", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 4", iconName: 'date' },
    { title: "Tab 5", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 5", iconName: 'date' },
    { title: "Tab 6", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 6", iconName: 'date' },
    { title: "Tab 7", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 7", iconName: 'date' },
    { title: "Tab 8", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 8", iconName: 'date' }
]

const Tabs = (props:Props) => {
    const {defaultTab, tabLabel, icon, type = 'default'} = props;
    const [activeTab, setActiveTab] = useState(defaultTab)
  return (
    <div className={`tabs ${type ? `tabs-${type}` : ''}`}>

        {/* Tabs Title */}
        <ul className='nav-tabs'>
            {
                tabs.map((tab, index) => (
                    <li className='nav-item' onClick={() => setActiveTab(index)}>
                         <p className={`nav-link ${activeTab === index ? 'active' : ''}`}>{ icon && <Iconsvg name={tab.iconName}/>} {tabLabel && tab.title}</p>
                    </li>
                ))
            }
        </ul>

        {/* Tabs content */}
        <div className='tab-content'>
            <div className='tab-pane'>
                {
                    tabs.map((tab, index) => (
                            <p className={`nav-link ${activeTab === index ? 'active' : ''}`}>
                                {activeTab === index && tab.content}
                            </p>
                    ))
                }
            </div>
        </div>

    </div>


  )
}

export default Tabs;