<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
    </ion-buttons>
    <ion-title>作品详情</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="shareArtwork()">
        <ion-icon name="share-social-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="art-detail-container" *ngIf="artwork">
    <div class="image-container">
      <img [src]="artwork.image" [alt]="artwork.title">
    </div>

    <div class="info-container">
      <h2>{{artwork.title}}</h2>
      <p class="description">{{artwork.description}}</p>

      <div class="user-info">
        <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
        <div class="user-details">
          <span class="username">{{artwork.userName}}</span>
          <span class="date">{{artwork.date}}</span>
        </div>
      </div>

      <div class="interaction-bar">
        <div class="likes" (click)="toggleLike()">
          <ion-icon [name]="artwork.isLiked ? 'heart' : 'heart-outline'"
            [color]="artwork.isLiked ? 'danger' : 'medium'">
          </ion-icon>
          <span>{{artwork.likes}}</span>
        </div>
        <div class="share">
          <ion-icon name="share-social-outline"></ion-icon>
          <span>分享</span>
        </div>
      </div>
    </div>

    <!-- 添加评论区域 -->
    <div class="comments-section">
      <h3>评论</h3>
      <div class="comment-input">
        <ion-input placeholder="写下你的评论..."></ion-input>
        <ion-button expand="block">发送</ion-button>
      </div>
    </div>
  </div>
</ion-content>