<template>
    <div class="card mb-3 shadow-sm">
        <div class="row g-0">
            <!-- 이미지 섹션 -->
            <div v-if="img" class="col-md-2">
                <img
                    :src="img"
                    alt="이미지"
                    class="img-fluid rounded-start"
                    style="object-fit: cover; height: 100%; width: 100%;"
                />
            </div>
            <!-- 게시물 내용 섹션 -->
            <div class="col-md-10">
                <div class="card-body">
                    <!-- 태그 -->
                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
                        {{ category }}
                    </h6>
                    <!-- 제목 -->
                    <h5 class="card-title">{{ title }}</h5>
                    <!-- 본문 -->
                    <p class="card-text str_wrap">{{ content }}</p>
                    <!-- 날짜 -->
                    <div class="d-flex justify-content-between">
                        <small class="text-muted">{{ formatDate(date) }}</small>
                        <!-- 좋아요와 댓글 -->
                        <div>
                            <span class="text-muted me-3">
                                <i class="bx bx-like"></i> {{ likes || 0 }}
                            </span>
                            <span class="text-muted">
                                <i class="bx bx-comment"></i> {{ comments || 0 }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        img: {
            type: String,
            default: null,
        },
        category: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        content: {
            type: String,
            required: true,
        },
        date: {
            type: String,
            required: true,
        },
        likes: {
            type: Number,
            default: 0,
        },
        comments: {
            type: Number,
            default: 0,
        },
    },
    methods: {
        formatDate(dateString) {
            const date = new Date(dateString);
            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-box-orient: vertical;
}

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

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