'use client';

import { HistoryFeed } from '@/components/features/journal/HistoryFeed';
import { HistoryDetailSheet } from '@/components/features/journal/HistoryDetailSheet';
import { useHistoryStore } from '@/lib/store/history-store';

export default function HistoryPage() {
    const selectedDraft = useHistoryStore((s) => s.selectedDraft);
    const closeDetail = useHistoryStore((s) => s.closeDetail);

    return (
        <div className="h-full flex flex-col bg-slate-50 relative">
            <header className="px-4 py-4 bg-white border-b border-slate-200 shrink-0 sticky top-0 z-10">
                <h1 className="text-xl font-bold font-serif text-slate-800">Your Journey</h1>
            </header>

            <HistoryFeed />

            {/* Detail Sheet for viewing history items */}
            {selectedDraft && (
                <HistoryDetailSheet
                    draft={selectedDraft}
                    onClose={closeDetail}
                    open={!!selectedDraft}
                />
            )}
        </div>
    );
}