import React from 'react';
import type { AssistantPreviewProps } from '../../types';
import styles from './index.module.less';

import defaultProfile from '../../assets/profile.png';
import defaultBackground from '../../assets/background.png';
import defaultArrow from '../../assets/arrow.png';

export const AssistantPreview: React.FC<AssistantPreviewProps> = ({
  assistantName = '小亦',
  onExpand,
  className,
  profileSrc,
  backgroundSrc,
  arrowSrc,
}) => {
  const profile = profileSrc ?? defaultProfile;
  const background = backgroundSrc ?? defaultBackground;
  const arrow = arrowSrc ?? defaultArrow;

  return (
    <div className={`${styles.wrap} ${className ?? ''}`}>
      <img className={styles.bg} src={background} alt="" aria-hidden />
      <img className={styles.profile} src={profile} alt="" aria-hidden />

      <div className={styles.footer}>
        <div className={styles.row}>
          <p className={styles.title}>智能助手{assistantName}，为您服务</p>
          <button
            type="button"
            className={styles.expandBtn}
            onClick={onExpand}
            aria-label="展开智能助手"
          >
            <img src={arrow} alt="" />
          </button>
        </div>
      </div>
    </div>
  );
};