import { Film } from '../../lib/icons'
import { usePosterGridClasses } from '../../lib/density'

export function EmptyLibrary({ type, Icon }: { type: string; Icon: typeof Film }) {
  return (
    <div className="flex flex-col items-center justify-center min-h-[50vh] text-center">
      <div className="relative w-16 h-16 mb-4">
        <div className="absolute inset-0 rounded-full bg-accent/10 blur-xl" />
        <div className="relative w-full h-full rounded-full bg-gradient-to-br from-elevated to-surface ring-1 ring-border grid place-items-center">
          <Icon size={22} className="text-text-3" />
        </div>
      </div>
      <p className="text-[15px] font-medium text-text-1 mb-1.5">No {type} found</p>
      <p className="text-[12px] text-text-4 max-w-sm">
        Add media to your Jellyfin library to see it here.
      </p>
    </div>
  )
}

export function PosterGridSkeleton() {
  const gridCls = usePosterGridClasses()
  return (
    <div className={gridCls}>
      {Array.from({ length: 24 }).map((_, i) => (
        <div key={i}>
          <div className="skeleton aspect-[2/3] rounded-lg" />
          <div className="mt-2 space-y-1">
            <div className="skeleton h-3 w-3/4 rounded" />
            <div className="skeleton h-2.5 w-1/2 rounded" />
          </div>
        </div>
      ))}
    </div>
  )
}
