import React, { FC } from 'react';

export interface ArtistInsightProps {
  artistName?: string;
  signatureAbility?: string;
  mentorTip?: string;
  className?: string;
}

/**
 * Decorative badge stack highlighting the currently tracked artist along with
 * their signature ability and mentor tip. Renders nothing when no artist data
 * is present to avoid empty chrome.
 *
 * @param artistName Optional musician name tied to the active quest step.
 * @param signatureAbility Optional ability title surfaced as a pill badge.
 * @param mentorTip Optional flavour text describing how to approach the quest.
 * @param className Optional wrapper class override.
 * @returns Artist insight layout or null when no data is available.
 */
const ArtistInsight: FC<ArtistInsightProps> = ({
  artistName,
  signatureAbility,
  mentorTip,
  className
}) => {
  if (!artistName && !signatureAbility && !mentorTip) {
    return null;
  }

  return (
    <div className={`artist-insight ${className ?? ''}`.trim()}>
      <div className="artist-insight-header">
        {artistName && <span className="artist-insight-name">🎼 {artistName}</span>}
        {signatureAbility && (
          <span className="artist-insight-ability" title={signatureAbility}>
            {signatureAbility}
          </span>
        )}
      </div>
      {mentorTip && <p className="artist-insight-tip">{mentorTip}</p>}
    </div>
  );
};

export default ArtistInsight;