import React, { useState } from 'react'
import { Tabs } from './Tabs.jsx'

export default {
  title: 'Design System/Display/Tabs',
  component: Tabs,
  args: {
    activeTabId: 'English',
    tabs: [
      { id: 'Português', label: 'Português' },
      { id: 'English', label: 'English' },
      { id: 'Svenska', label: 'Svenska' },
      { id: 'Français', label: 'Français' },
      { id: 'Español', label: 'Español' },
    ],
  },
  render: (props) => {
    const [activeTabId, setActiveTabId] = useState(props.activeTabId)

    return (
      <Tabs
        {...props}
        activeTabId={activeTabId}
        onTabClick={(_event, tab) => setActiveTabId(tab.id)}
      />
    )
  },
}

export const Default = {}

export const AsLinks = {
  args: {
    tabs: [
      { id: 'Português', label: 'Português', href: '/portuguese' },
      { id: 'English', label: 'English', href: '/' },
      { id: 'Svenska', label: 'Svenska', href: '/swedish' },
      { id: 'Français', label: 'Français', href: '/french' },
      { id: 'Español', label: 'Español', href: '/spanish' },
    ],
  },
}

export const Theming = {
  args: {
    variant: 'dark',
    theme: {
      'tabs-dark-background': 'hsl(0, 0%, 20%)',
      'tabs-dark-color': 'hsl(0, 0%, 80%)',
      'tabs-dark-accent-active': 'hsl(25, 80%, 50%)',
    },
  },
}