'use client';
import IconFont from '@/components/ui/iconFont';
import Image from 'next/image';
import Tags from '@/components/ui/Tags';

export default function Info() {
  return (
    <div className="w-full px-5 py-7.5 pt-5">
      {/* 角色名称 - 使用 header 和 h1 */}
      <header className="flex items-center justify-between">
        <h1 className="text-text-color text-lg font-bold">
          The Boss Fell for Me: My Days Screwing Nuts at Foxconn
        </h1>
      </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>1234567890</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>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>18</dd>
        </div>
      </dl>

      {/* 角色TAG */}
      <Tags
        className="mt-10"
        options={[
          { label: 'tag1', value: 'tag1' },
          { label: 'tag2', value: 'tag2' },
        ]}
      />

      {/* description - 使用 section 和语义化标签 */}
      <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">
          The Boss Fell for Me: My Days Screwing Nuts at Foxconn
        </p>
      </section>

      <div className="mt-10 flex items-center gap-2.5 rounded-[10px] border border-white/30 bg-black/20">
        <div
          className="cover-bg h-15 w-11 rounded-lg"
          style={{
            backgroundImage: 'url(/test.png)',
          }}
        />
        <div className="text-text-color/80 max-w-110 flex-1 pr-2 text-sm">
          <span style={{ color: 'rgb(0, 102, 255)' }}>Form: </span>
          {`the boss fell for me: my days screwing nuts at foxconn`}
        </div>
      </div>
    </div>
  );
}
