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

interface TabItem {
  id: string;
  title: string;
  content: React.ReactNode;
}

export interface TableTabProps {
  tabs: TabItem[];
  activeColor?: string;
  activeTextColor: string;
  inactiveColor?: string;
  borderColor?: string;
  hoverColor?: string;
  onTabChange?: (tabId: string) => void;
  activeTab?: string;
}

export const InternalTabs: React.FC<TableTabProps> = ({
  tabs,
  activeColor = '#fef08a',
  activeTextColor = '#000000',
  inactiveColor = '#6b7280',
  borderColor = '#f59e0b',
  hoverColor = '#fef3c7',
  onTabChange,
  activeTab: externalActiveTab,
}) => {
  const activeTabId = externalActiveTab ?? tabs[0].id;

  return (
    <TableWrapper>
      <TabHeader borderColor={borderColor}>
        {tabs.map(tab => (
          <TabButton
            key={tab.id}
            active={activeTabId === tab.id}
            activeColor={activeColor}
            activeTextColor={activeTextColor}
            inactiveColor={inactiveColor}
            borderColor={borderColor}
            hoverColor={hoverColor}
            onClick={() => onTabChange?.(tab.id)}
          >
            {tab.title}
          </TabButton>
        ))}
      </TabHeader>
      <ContentWrapper>
        {tabs.find(tab => tab.id === activeTabId)?.content}
      </ContentWrapper>
    </TableWrapper>
  );
};

const TableWrapper = styled.div`
  width: 100%;
`;

const TabHeader = styled.div<{ borderColor: string }>`
  display: flex;
  border-bottom: 1px solid ${props => props.borderColor};
`;

const TabButton = styled.button<{
  active: boolean;
  activeColor: string;
  activeTextColor: string;
  inactiveColor: string;
  borderColor: string;
  hoverColor: string;
}>`
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-right: 1px solid ${props => props.borderColor};
  background-color: ${props =>
    props.active ? props.activeColor : 'transparent'};
  color: ${props =>
    props.active ? props.activeTextColor : props.inactiveColor};

  &:last-child {
    border-right: none;
  }

  &:hover {
    background-color: ${props =>
      props.active ? props.activeColor : props.hoverColor};
  }
`;

const ContentWrapper = styled.div``;
