import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';

import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
import { TabButtonLink, TabItem } from '@redocly/theme/markdoc/components/Tabs/TabList';
import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';

export type TabProps = {
  tabId: string;
  label: string;
  size: TabsSize;
  disabled?: boolean;
  setRef: (element: HTMLButtonElement | null) => void;
  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
  onClick: () => void;
  icon?: React.ReactNode;
  iconRawContent?: string;
};

export function TabComponent({
  tabId,
  label,
  size,
  disabled,
  setRef,
  onKeyDown,
  onClick,
  icon,
  iconRawContent,
}: TabProps): JSX.Element {
  return (
    <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
      <TabButtonLink
        id={`tab-${tabId}`}
        data-label={label}
        role="tab"
        aria-selected="false"
        aria-controls={`panel-${tabId}`}
        tabIndex={-1}
        size={size}
        disabled={disabled}
        ref={setRef}
        onKeyDown={onKeyDown}
        onClick={onClick}
      >
        <LabelWrapper>
          <GenericIcon icon={icon} rawContent={iconRawContent} />
          {label}
        </LabelWrapper>
      </TabButtonLink>
    </TabItem>
  );
}

const LabelWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  --icon-width: var(--md-tabs-icon-size);
  --icon-height: var(--md-tabs-icon-size);
`;

export const Tab = styled(TabComponent)``;