// src/components/NewsItem.vue
<template>
  <div class="bg-base-100 shadow-md rounded-lg overflow-hidden flex flex-col h-full hover:shadow-lg hover:-translate-y-1">
    <div
        class="w-full bg-gray-200 relative "
        :class="{
          'h-[266px]': isFeature,  // คำนวณใหม่: (516px (total) - padding-top/bottom - content_height) / image_ratio
          'h-[120px]': !isFeature   // คำนวณใหม่: (250px (total) - padding-top/bottom - content_height) / image_ratio
        }"
    >
      <img
          :src="`${appStore.imageBaseUrl}${item.image?.url ?? ''}`"
          alt="News Thumbnail"
          class="absolute inset-0 w-full h-full object-cover"
          @error="e => e.target.style.display = 'none'"
      />
    </div>

    <div class="p-4 flex flex-col flex-grow">
      <router-link
          :to="`/news-content/${item.id}`"
          class="font-semibold text-gray-800 hover:underline mb-2"
          :class="{
            'text-xl md:text-2xl line-clamp-2': isFeature,
            'text-lg line-clamp-2': !isFeature
          }"
      >
        {{ appStore.checkLang.isTh ? item.title_th : item.title_en || 'No Title' }}
      </router-link>
      <p
          class="text-sm text-gray-600 mb-3 flex-grow"
          :class="{
            'line-clamp-4': isFeature,
            'line-clamp-3': !isFeature
          }"
      >
        {{ truncateDetail(appStore.checkLang.isTh ? item.detail_th : item.detail_en || '', isFeature ? 200 : 120) }}
      </p>
      <div class="text-xs text-gray-400 mt-auto">
        <span v-if="item.release_date">{{ formatDate(item.release_date) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useAppStore } from '@/stores/app';
import { RouterLink } from 'vue-router';

const appStore = useAppStore();

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  isFeature: {
    type: Boolean,
    default: false,
  },
});

const truncateDetail = (text, maxLength) => {
  if (!text) return '';
  return text.length <= maxLength ? text : text.substring(0, maxLength) + '...';
};

const formatDate = (dateString) => {
  if (!dateString) return '';
  const parts = dateString.split('/');
  if (parts.length === 3) {
    const [month, day, year] = parts;
    const dateObj = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
    const formattedDay = String(dateObj.getDate()).padStart(2, '0');
    const formattedMonth = String(dateObj.getMonth() + 1).padStart(2, '0');
    const formattedYear = dateObj.getFullYear();
    return `${formattedDay}/${formattedMonth}/${formattedYear}`;
  }
  return dateString;
};
</script>

<style scoped>
/* No specific styles needed, using Tailwind classes */
</style>