vexplor/frontend/components/pop/hardcoded/RecentActivity.tsx

"use client";

import React from "react";

interface ActivityItem {
  id: string;
  time: string;
  title: string;
  description: string;
  iconGradient: string;
  icon: React.ReactNode;
}

const ACTIVITY_ITEMS: ActivityItem[] = [
  {
    id: "1",
    time: "14:32",
    title: "WO-0401-003 불량률 초과",
    description: "불량률 5.2% (기준: 3%) — 생산2팀 긴급 점검 요청",
    iconGradient: "linear-gradient(135deg,#ef4444,#b91c1c)",
    icon: (
      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z" />
      </svg>
    ),
  },
  {
    id: "2",
    time: "13:15",
    title: "구매입고 PO-0401-012 도착",
    description: "(주)한국철강 | STS304 2T 500EA",
    iconGradient: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
    icon: (
      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
      </svg>
    ),
  },
  {
    id: "3",
    time: "11:48",
    title: "WO-0401-004 작업 완료",
    description: "파이프 조인트 D | 절단 공정 완료 | 수량 120EA",
    iconGradient: "linear-gradient(135deg,#22c55e,#15803d)",
    icon: (
      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  {
    id: "4",
    time: "10:22",
    title: "제품출고 SO-0401-008",
    description: "알루미늄 프로파일 A100 200EA | (주)대한산업",
    iconGradient: "linear-gradient(135deg,#f59e0b,#d97706)",
    icon: (
      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6" />
      </svg>
    ),
  },
  {
    id: "5",
    time: "09:05",
    title: "3호기 정기점검 완료",
    description: "설비팀 김대리 | 정상 가동 재개",
    iconGradient: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
    icon: (
      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
];

export function RecentActivity() {
  return (
    <section>
      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-6">
        <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
          <h3 className="text-base sm:text-lg font-bold text-gray-900">최근 활동</h3>
          <span className="text-xs text-gray-400 cursor-pointer hover:text-gray-600 transition-colors">
            전체 보기
          </span>
        </div>
        <div className="flex flex-col gap-2 sm:gap-3">
          {ACTIVITY_ITEMS.map((item) => (
            <div
              key={item.id}
              className="flex items-center gap-3 sm:gap-4 p-3 rounded-xl transition-all duration-150 hover:bg-gray-50 hover:translate-x-1"
            >
              <span
                className="text-xs sm:text-sm font-semibold text-gray-400 min-w-[44px] sm:min-w-[52px] text-right"
                style={{ fontVariantNumeric: "tabular-nums" }}
              >
                {item.time}
              </span>
              <div
                className="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center shrink-0"
                style={{ background: item.iconGradient }}
              >
                {item.icon}
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-semibold text-gray-900 truncate">{item.title}</div>
                <div className="text-xs text-gray-400 mt-0.5 truncate">{item.description}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}