/**
 * 소식 — 사장님이 쓰는 공지·안내.
 *
 * ★ 지역 리서치 아이템과 성격이 다르다. 여기 글의 주인은 사장님이고 출처도 사장님이다 —
 *   그래서 source 를 요구하지 않는다(SourceLine 대신 verified 배지만).
 */
import type {EventItem} from '@o2o/shared';
import {useSite} from '@/lib/site-context';
import {sectionItems, sectionName} from '@/lib/derive';
import {ITEM_ACCENT, ITEM_BORDER, ITEM_CARD, ItemSection, tally} from './common';

export function EventSection() {
  const payload = useSite();
  const parsed = sectionItems<EventItem>(payload, 'event');
  if (parsed.items.length === 0) return null;

  return (
    <ItemSection
      id="event"
      name={parsed.title || sectionName(payload, 'event', '소식')}
      subtitle={parsed.subtitle ?? '미리 알아 두시면 좋은 것들'}
      count={tally(parsed.items.length, parsed.unverified, '건')}
    >
      <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {parsed.items.map((notice, index) => (
          <li
            key={`${notice.title}-${index}`}
            className="w4-paper flex flex-col border-2 p-5"
            style={{backgroundColor: ITEM_CARD, borderColor: ITEM_BORDER}}
          >
            {notice.kind && (
              <span
                className="mb-2 self-start border px-2 py-0.5 text-[length:var(--fs-xs)] font-bold"
                style={{borderColor: ITEM_ACCENT, color: ITEM_ACCENT}}
              >
                {notice.kind}
              </span>
            )}
            <h3 className="serif text-[length:var(--fs-lead)] font-bold leading-snug">{notice.title}</h3>
            {notice.summary && (
              <p className="measure mt-2 text-[length:var(--fs-sm)] opacity-80">{notice.summary}</p>
            )}
            {notice.body && (
              // 줄바꿈이 항목 구분이다. 사장님이 쓴 그대로 둔다.
              <p className="mt-3 whitespace-pre-line text-[length:var(--fs-sm)] leading-relaxed opacity-75">
                {notice.body}
              </p>
            )}
          </li>
        ))}
      </ul>
    </ItemSection>
  );
}