<template>
  <div
    v-if="board"
    class="border rounded-lg dark:border-gray-700 overflow-hidden"
  >
    <div class="board md:flex flex-wrap border-b dark:border-gray-700">
      <div
        class="py-2 px-4 bg-stone-100 md:text-center font-semibold w-full md:w-1/5 dark:bg-gray-800 dark:text-gray-200"
      >
        제목
      </div>
      <div class="px-4 py-2 flex-1 dark:text-gray-200">{{ board.title }}</div>
    </div>

    <div class="board md:flex flex-wrap border-b dark:border-gray-700">
      <div
        class="py-2 px-4 bg-stone-100 flex md:justify-center md:items-center font-semibold w-full md:w-1/5 dark:bg-gray-800 dark:text-gray-200"
      >
        첨부파일
      </div>
      <div class="flex flex-col px-4 py-2 flex-1">
        <template v-if="board.files && board.files.length">
          <a
            v-for="(file, index) in board.files"
            :key="index"
            :href="file.url"
            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 py-1 transition-colors duration-150"
            download
          >
            <i class="fas fa-download mr-1 fa-fw"></i> {{ file.name }}
          </a>
        </template>
        <span v-else class="text-gray-500 dark:text-gray-400">
          첨부파일이 없습니다.
        </span>
      </div>
    </div>

    <div class="board">
      <div class="px-4 py-6">
        <div
          class="flex flex-wrap justify-center items-center mb-6"
          v-if="board.thumbnail?.url"
        >
          <img
            :src="board.thumbnail.url"
            :alt="board.thumbnail.name || 'Thumbnail'"
            class="max-w-full h-auto rounded shadow-md"
          />
        </div>

        <div
          class="prose prose-stone max-w-none dark:prose-invert dark:text-gray-300"
          v-html="board.description"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BoardItem } from '@/types';

// Define component props
const props = defineProps<{
  board: BoardItem;
}>();
</script>

<style scoped>
.board {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
</style>
