import { useState } from 'react';
import LogTable, { Activity } from './LogTable';
import ActivityDetailDialog from './ActivityDetailDialog';
import { History } from 'lucide-react';

interface Props {
    activities: Activity[];
    className?: string;
}

export default function ActivityLog({ activities, className = '' }: Props) {
    const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null);
    const [isDetailOpen, setIsDetailOpen] = useState(false);

    const handleViewDetail = (activity: Activity) => {
        setSelectedActivity(activity);
        setIsDetailOpen(true);
    };

    return (
        <div className={`space-y-4 ${className}`}>
            <div className="flex items-center gap-2">
                <History className="h-5 w-5 text-gray-500" />
                <h3 className="text-lg font-semibold text-gray-900">操作紀錄</h3>
            </div>

            <LogTable
                activities={activities}
                onViewDetail={handleViewDetail}
            />

            <ActivityDetailDialog
                open={isDetailOpen}
                onOpenChange={setIsDetailOpen}
                activity={selectedActivity}
            />
        </div>
    );
}