'use client'

import { ProjectLogo } from './project-logo'
import { trpc } from '@/lib/trpc/client'

type ProjectLogoWithUrlProps = {
  project: {
    id: string
    title: string
    logoKey?: string | null
  }
  size?: 'sm' | 'md' | 'lg'
  fallback?: 'icon' | 'initials'
  className?: string
}

/**
 * Project logo component that fetches the URL automatically via tRPC.
 * Use this in client components when you only have the project data without the URL.
 */
export function ProjectLogoWithUrl({
  project,
  size = 'md',
  fallback = 'icon',
  className,
}: ProjectLogoWithUrlProps) {
  const { data: logoUrl } = trpc.logo.getUrl.useQuery(
    { projectId: project.id },
    {
      enabled: !!project.logoKey,
      staleTime: 60 * 1000, // Cache for 1 minute
    }
  )

  return (
    <ProjectLogo
      project={project}
      logoUrl={logoUrl}
      size={size}
      fallback={fallback}
      className={className}
    />
  )
}