type VoiceProps = {
  voiceImage?: string;
  voiceContent?: string;
  voiceContentHtml?: string;
  voiceAuthorName?: string;
  voiceAuthorTitle?: string;
  voiceAuthorCompanyLogo?: string;
  quoteRight?: boolean;
}

export default function Voice({
  voiceImage = "images/img-voice-left.png",
  voiceContent = "AUO didn't just invest in AI—they invested in the future. By partnering with Taiwan AI Academy (AIA), AUO pioneered an AI revolution, deploying 2,000+ AI models, boosting productivity by 40%, and cutting energy consumption by 20%—all within five years. This is the power of strategic AI adoption. AIA isn't just training talent; it's shaping the future of industries. Partner with AIA, and lead the next wave of AI-driven success.",
  voiceContentHtml,
  voiceAuthorName = "Shuang-Lang (Paul) Peng",
  voiceAuthorTitle = "Chairman and Group Chief Strategy Officer",
  voiceAuthorCompanyLogo,
  quoteRight = false,
}: VoiceProps) {
  return (
    <div className="voice">
      <figure className="voice-visual">
        <img
          className="object-scale-down object-center"
          src={voiceImage}
          alt=""
        />
      </figure>
      <div className="voice-content">
        <blockquote className={`voice-quote${quoteRight ? ' voice-quote--right' : ''}`}>
          <span
            className="px-24 lg:px-36"
            {...(voiceContentHtml ? { dangerouslySetInnerHTML: { __html: voiceContentHtml } } : {})}
          >
            {!voiceContentHtml ? voiceContent : null}
          </span>
        </blockquote>
        <div className="voice-author">
          <p className="voice-authorName">{voiceAuthorName}</p>
          <div className="voice-authorInformation">
            <p className="voice-authorTitle">
              {voiceAuthorTitle}
            </p>
            {voiceAuthorCompanyLogo && (
              <img className="voice-authorCompany" src={voiceAuthorCompanyLogo} alt="" />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}