'use client'

import { useSelectionStore } from '@/stores/selection-store'
import { PanelNavBar } from '@/components/shared/panel-nav-bar'

interface Story {
  id: string
  title: string
  status: string
}

interface StoryPanelProps {
  storiesByPbi: Record<string, Story[]>
  isDemo: boolean
}

export function StoryPanel({ storiesByPbi, isDemo }: StoryPanelProps) {
  const { selectedPbiId } = useSelectionStore()

  const stories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : null

  return (
    <div className="flex flex-col h-full">
      <PanelNavBar
        title="Stories"
        actions={
          selectedPbiId && !isDemo ? (
            <button className="text-xs text-primary hover:underline">+ Story</button>
          ) : undefined
        }
      />
      <div className="flex-1 overflow-y-auto p-4">
        {stories === null ? (
          <p className="text-sm text-muted-foreground text-center mt-8">
            Selecteer een PBI om de stories te bekijken.
          </p>
        ) : stories.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center mt-8">
            Nog geen stories voor dit PBI.
          </p>
        ) : (
          <div className="space-y-2">
            {stories.map(story => (
              <div
                key={story.id}
                className="bg-surface-container-low border border-border rounded-lg p-3 text-sm"
              >
                {story.title}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}