<template>
    <div class="card mb-3 shadow-sm">
        <div class="row g-0">
            <!-- 이미지 섹션 -->
            <div v-if="img" class="col-sm-2">
                <img
                    :src="img"
                    alt="이미지"
                    class="img-fluid rounded-start"
                    style="object-fit: cover; height: 100%; width: 100%;"
                />
            </div>
            <!-- 게시물 내용 섹션 -->
            <div :class="contentColClass">
                <div class="card-body">
                    <!-- 태그 -->
                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
                        {{ category }}
                    </h6>
                    <!-- 제목 -->
                    <h5 class="card-title">
                        {{ title }}
                        <span class="text-muted me-3" v-if="attachment">
                            <i class="fa-solid fa-paperclip"></i>
                        </span>
                    </h5>
                    <!-- 본문 -->
                    <div class="card-text str_wrap my-5">{{ content }}</div>
                    <!-- 날짜 -->
                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
                        <small class="text-muted">{{ formattedDate }}</small>
                        <!-- 조회수, 좋아요, 댓글 -->
                        <div class="d-flex mt-2 mt-sm-0">
                            <span class="text-muted me-3">
                                <i class="fa-regular fa-eye"></i> {{ views || 0 }}
                            </span>
                            <span class="text-muted me-3" v-if="likes != null">
                                <i class="bx bx-like"></i> {{ likes }}
                            </span>
                            <span class="text-muted" v-if="comments !== null">
                                <i class="bx bx-comment"></i> {{ comments }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { defineProps } from 'vue';

// Props 정의
const props = defineProps({
    img: {
        type: String,
        default: null,
    },
    category: {
        type: String,
        required: false,
    },
    title: {
        type: String,
        required: true,
    },
    content: {
        type: String,
        required: true,
    },
    date: {
        type: String,
        required: true,
    },
    views: {
        type: Number,
        default: 0,
    },
    likes: {
        type: Number,
        default: null,
    },
    comments: {
        type: Number,
        default: null,
    },
    attachment: {
        type: Boolean,
        default: false,
    }
});

// computed 속성
const contentColClass = computed(() => {
    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
});

// formattedDate을 computed로 정의
const formattedDate = computed(() => {
    const date = new Date(props.date);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
        date.getDate()
    ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
        date.getMinutes()
    ).padStart(2, "0")}`;
});
</script>

<style>
/* 카드 스타일 */
.card {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: scale(1.02);
}

/* 텍스트 줄임 표시 */
.str_wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 이미지 스타일 */
.img-fluid {
    border-radius: 8px 0 0 8px;
}

/* 태그 배지 스타일 */
.badge {
    font-size: 0.8rem;
    padding: 5px 10px;
}
</style>
