'use client'

import { PlaceholderCard } from '@admin/components/custom/placeholder-card'
import { Button } from '@admin/components/ui/button'
import { Spinner } from '@admin/components/ui/spinner'
import { ImageIcon } from 'lucide-react'

interface MediaEmptyStateProps {
  variant: 'no-results' | 'loading' | 'empty'
  onClearSearch?: () => void
}

export function MediaEmptyState({ variant, onClearSearch }: MediaEmptyStateProps) {
  if (variant === 'loading') {
    return (
      <div className="flex h-48 items-center justify-center">
        <Spinner />
      </div>
    )
  }

  if (variant === 'empty') {
    return (
      <PlaceholderCard
        icon={<ImageIcon className="size-10 text-muted-foreground" strokeWidth={1} />}
        title="No media yet"
        description="Upload an image, video, or document to get started."
      />
    )
  }

  return (
    <PlaceholderCard
      icon={<ImageIcon className="size-10 text-foreground" strokeWidth={1} />}
      title="No media matches your search"
      description="Try adjusting your search or filters."
      action={
        onClearSearch ? (
          <Button variant="outline" onClick={onClearSearch}>
            Clear Search
          </Button>
        ) : undefined
      }
    />
  )
}