visual-novel-web/src/app/(main)/character/[id]/(detail)/components/BasicInfo.tsx

import { Rate } from '@/components';
import Image from 'next/image';
import { RightArrowIcon } from '@/assets/chatacter';
import IconFont from '@/components/ui/iconFont';
import ChatButton from './ChatButton';
import Tags from '@/components/ui/Tags';
import { useTranslations } from 'next-intl';

type CharacterBasicInfoProps = {
  characterId: string;
  characterDetail?: any;
};

export default function CharacterBasicInfo({
  characterId,
  characterDetail,
}: CharacterBasicInfoProps) {
  const msg = useTranslations();

  if (!characterDetail) {
    return null;
  }

  const from = characterDetail?.from || "The CEO's Contract Wife";
  const avatar = characterDetail?.avatar || '/test.png';
  const fromImage = characterDetail?.fromImage || '/images/character/from.png';
  const characterName = characterDetail?.name || '未知角色';

  return (
    <article className="flex w-full gap-7.5">
      {/* 角色头像 - 使用 figure 语义化标签 */}
      <figure>
        <Image
          src={avatar}
          alt={`${characterName} - 角色头像`}
          width={338}
          height={600}
          priority
        />
      </figure>

      <div className="w-full pt-5">
        {/* 角色名称 - 使用 header 和 h1 */}
        <header className="flex items-center justify-between">
          <h1 className="text-text-color text-4xl font-bold">
            {characterName}
            {msg('common_desc')}
          </h1>
          <div>
            <IconFont type="icon-jubao" size={20} />
          </div>
        </header>

        {/* 角色基本信息 - 使用定义列表 */}
        <dl className="text-text-color/60 mt-4 flex items-center gap-2">
          <div className="flex items-center gap-2">
            <dt
              style={{ backgroundColor: 'rgba(255, 102, 0, 1)' }}
              className="text-text-color inline-flex h-4 w-4 justify-center rounded-md text-xs"
              aria-label="角色ID"
            >
              ID
            </dt>
            <dd>{characterDetail.id}</dd>
          </div>
          <div
            style={{ background: 'rgba(255, 255, 255, 0.2)' }}
            className="h-2 w-0.25"
            aria-hidden="true"
          ></div>
          <div className="flex items-center gap-2">
            <dt className="sr-only">年龄</dt>
            <dd>{characterDetail.age ?? '18'}</dd>
          </div>
          <div
            style={{ background: 'rgba(255, 255, 255, 0.2)' }}
            className="h-2 w-0.25"
            aria-hidden="true"
          ></div>
          <div className="flex items-center gap-2">
            <dt className="sr-only">角色类型</dt>
            <dd>{characterDetail.role}</dd>
          </div>
        </dl>

        {/* 角色评分 */}
        <div className="mt-8">
          <Rate value={characterDetail.rate ?? 7} readonly />
        </div>

        {/* 角色TAG */}
        {characterDetail.tags && characterDetail.tags.length > 0 && (
          <div className="mt-10">
            <Tags
              options={characterDetail.tags.map((tag: any) => ({
                label: tag,
                value: tag,
              }))}
            />
          </div>
        )}

        {/* divider */}
        <div
          className="bg-text-color/10 mt-10 h-0.25 w-full"
          aria-hidden="true"
        ></div>

        {/* description - 使用 section 和语义化标签 */}
        {characterDetail.description && (
          <section className="mt-10.5">
            <h2 className="flex items-center">
              <Image
                src={'/character/desc.svg'}
                alt=""
                aria-hidden="true"
                className="mr-1"
                width={18}
                height={20}
              />
              {'Description'}:
            </h2>
            <p className="text-text-color/60 mt-5 text-sm">
              {characterDetail.description}
            </p>
          </section>
        )}

        {/* from and chat */}
        <div className="flex items-center justify-between gap-10 pt-5">
          {/* FROM - 使用语义化标签 */}
          {from && (
            <div className="bg-text-color/5 flex h-15 items-center justify-between rounded-lg pr-5">
              <div className="flex items-center">
                <Image
                  src={fromImage}
                  alt={`${from} - 来源作品封面`}
                  className="rounded-lg"
                  width={45}
                  height={60}
                />
                <div className="text-text-color/80 max-w-110 pr-2 text-sm">
                  <span style={{ color: 'rgb(0, 102, 255)' }}>Form:</span>
                  {` ${from}`}
                </div>
              </div>
              <RightArrowIcon />
            </div>
          )}

          {/* Chat Button - 客户端组件 */}
          <ChatButton characterId={characterId} />
        </div>
      </div>
    </article>
  );
}