'use client';

import { HeartIcon, ReplyIcon } from '@/assets/chatacter';
import { Rate } from '@/components';
import IconFont from '@/components/ui/iconFont';
import Image from 'next/image';

const Comment = () => {
  return (
    <div>
      <div className="flex w-full">
        <Image
          src={'/images/character/avatar.png'}
          alt="comment"
          width={100}
          height={100}
        />
        <div className="w-full">
          <div className="mt-1.25 flex items-center justify-between">
            <div className="flex items-center justify-between gap-5">
              <span className="text-sm">{'User'}</span>
              <Rate readonly value={7.5} />
            </div>
            <div className="text-text-color/80 text-sm text-[15px]">
              {'2025/07/31 12:59'}
            </div>
          </div>
          <div className="text-text-color/80 mt-4.5 text-[15px]">
            {
              'A hauntingly beautiful meditation on memory and loss that lingers long after the final page is turned.'
            }
          </div>
          {/* 操作按钮 */}
          <div className="mt-5 flex items-center justify-between">
            <div className="flex items-center gap-10">
              <div
                style={{ color: 'rgba(0, 204, 136, 1)' }}
                className="flex items-center gap-2.5 hover:cursor-pointer"
              >
                <ReplyIcon />
                <span>REPLY</span>
              </div>
              <div className="flex items-center gap-2.5 hover:cursor-pointer">
                <HeartIcon liked />
                <span>999</span>
              </div>
            </div>
            <IconFont type="icon-jubao" size={20} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default function CharacterReview() {
  return (
    <div>
      <Comment />
    </div>
  );
}
