import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import {
  BENEFIT_INTRO,
  BENEFIT_INTRO_EMPHASIS,
  BENEFIT_RULES_PATH,
  BENEFIT_SLOGAN,
} from '../lib/benefit-copy';

type BenefitIntroCardProps = {
  showLink?: boolean;
  className?: string;
  /** 左侧金色粗条（门店详情等强调卡） */
  accent?: boolean;
};

export default function BenefitIntroCard({
  showLink = false,
  className,
  accent = false,
}: BenefitIntroCardProps) {
  const prefix = BENEFIT_INTRO.endsWith(BENEFIT_INTRO_EMPHASIS)
    ? BENEFIT_INTRO.slice(0, -BENEFIT_INTRO_EMPHASIS.length)
    : BENEFIT_INTRO;

  function goRules() {
    Taro.navigateTo({ url: BENEFIT_RULES_PATH });
  }

  const inner = (
    <>
      <Text className="benefit-intro-card-title">{BENEFIT_SLOGAN}</Text>
      <Text className="benefit-intro-card-body">
        {prefix}
        <Text className="benefit-intro-card-em">{BENEFIT_INTRO_EMPHASIS}</Text>
      </Text>
      {showLink ? (
        <Text className="benefit-intro-card-link" onClick={goRules}>
          查看完整说明 ›
        </Text>
      ) : null}
    </>
  );

  return (
    <View
      className={`benefit-intro-card${accent ? ' benefit-intro-card--accent' : ''}${className ? ` ${className}` : ''}`}
    >
      {accent ? <View className="benefit-intro-card-bar" /> : null}
      {accent ? <View className="benefit-intro-card-main">{inner}</View> : inner}
    </View>
  );
}