import React from 'react';
import { View, Text } from '@tarojs/components';
import './index.scss';

interface Tab {
  key: string;
  label: string;
}

interface SegmentTabsProps {
  tabs: Tab[];
  activeKey: string;
  onChange: (key: string) => void;
  variant?: 'underline' | 'pill';
}

export default React.memo(function SegmentTabs({
  tabs,
  activeKey,
  onChange,
  variant = 'underline',
}: SegmentTabsProps) {
  return (
    <View className={`seg-tabs seg-tabs--${variant}`}>
      {tabs.map((tab) => (
        <View
          key={tab.key}
          className={`seg-tab ${activeKey === tab.key ? 'seg-tab--active' : ''}`}
          onClick={() => onChange(tab.key)}
        >
          <Text className='seg-tab__text'>{tab.label}</Text>
        </View>
      ))}
    </View>
  );
});