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

type AlertColor = 'pri' | 'wrn';

interface TodoAlertProps {
  icon?: string;
  title: string;
  subtitle?: string;
  color?: AlertColor;
  onPress?: () => void;
}

const TodoAlert: React.FC<TodoAlertProps> = ({
  icon,
  title,
  subtitle,
  color = 'pri',
  onPress,
}) => {
  const cls = ['todo-alert', `todo-alert--${color}`].join(' ');

  return (
    <View className={cls} onClick={onPress}>
      {icon && (
        <View className="todo-alert__icon-wrap">
          <Text className="todo-alert__icon">{icon}</Text>
        </View>
      )}
      <View className="todo-alert__body">
        <Text className="todo-alert__title">{title}</Text>
        {subtitle && <Text className="todo-alert__subtitle">{subtitle}</Text>}
      </View>
      <Text className="todo-alert__arrow">›</Text>
    </View>
  );
};

export default React.memo(TodoAlert);