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

interface SectionTitleProps {
  title: string;
  subtitle?: string;
  action?: { text: string; onPress: () => void };
  icon?: ReactNode;
}

const SectionTitle: React.FC<SectionTitleProps> = ({
  title,
  subtitle,
  action,
  icon,
}) => {
  return (
    <View className="section-title">
      <View className="section-title__left">
        <View className="section-title__bar" />
        {icon && <View className="section-title__icon">{icon}</View>}
        <View className="section-title__text-wrap">
          <Text className="section-title__text">{title}</Text>
          {subtitle && <Text className="section-title__subtitle">{subtitle}</Text>}
        </View>
      </View>
      {action && (
        <Text className="section-title__action" onClick={action.onPress}>
          {action.text}
        </Text>
      )}
    </View>
  );
};

export default React.memo(SectionTitle);