import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

interface ChatTabsProps {
  tabs: { label: string; id: string }[];
  activeTab: string;
  onChangeTab: (tabId: string) => void;
}

export const ChatTabs: React.FC<ChatTabsProps> = ({
  tabs,
  activeTab,
  onChangeTab,
}) => (
  <TabContainer>
    {tabs.map((tab, index) => (
      <Tab
        key={`${tab.label}_${index}`}
        active={tab.id === activeTab}
        onPointerDown={() => onChangeTab(tab.id)}
      >
        {tab.label}
      </Tab>
    ))}
  </TabContainer>
);

const TabContainer = styled.div`
  display: flex;
  gap: 10px;
  align-items: center;
  flex-grow: 1;
`;

const Tab = styled.button<{ active: boolean }>`
  width: 120px;
  color: white;
  font-size: 0.8rem;
  all: unset;
  padding: 0.6rem;
  font-size: 0.8rem;
  border-radius: 5px 5px 0 0;
  border-width: 0.25rem 0.25rem 0 0.25rem;
  border-style: solid;
  border-color: ${props =>
    props.active ? 'rgba(198, 81, 2, 0.5)' : 'rgba(128, 128, 128, 0.5)'};
  background-color: ${props =>
    props.active ? uiColors.orange : 'rgba(0, 0, 0, 0.2)'};
  color: ${props => (props.active ? 'white' : uiColors.darkGray)};
`;
