import React, { useState, useEffect } from 'react'
import { Story } from '../../types'
import { StoryCard } from '../ui/StoryCard'
import { BookOpen } from 'lucide-react'
interface StoryGridProps {
stories: Story[]
showStatus?: boolean
emptyMessage?: string
loading?: boolean
}
const SkeletonCard = () => (
)
export const StoryGrid: React.FC = ({
stories,
showStatus = false,
emptyMessage = 'No stories found.',
loading: externalLoading,
}) => {
const [loading, setLoading] = useState(true)
useEffect(() => {
const timer = setTimeout(() => setLoading(false), 800)
return () => clearTimeout(timer)
}, [])
const isLoading = externalLoading !== undefined ? externalLoading : loading
if (isLoading) {
return (
{Array.from({ length: 3 }).map((_, i) => )}
)
}
if (stories.length === 0) {
return (
{emptyMessage}
Try adjusting your search or filters.
)
}
return (
{stories.map(story => (
))}
)
}