const BUCKET = 'boat-images'

export function useBoatImage() {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const supabase = useSupabaseClient() as any

  function url(path: string | null | undefined, width?: number, height?: number): string {
    if (!path) return ''
    const opts = width && height
      ? { transform: { width, height, resize: 'cover' as const } }
      : undefined
    const { data } = supabase.storage.from(BUCKET).getPublicUrl(path, opts)
    return data.publicUrl as string
  }

  return {
    thumbnail: (path: string | null | undefined) => url(path, 150, 150),
    small:     (path: string | null | undefined) => url(path, 400, 300),
    medium:    (path: string | null | undefined) => url(path, 800, 600),
    large:     (path: string | null | undefined) => url(path, 1200, 900),
    original:  (path: string | null | undefined) => url(path),
  }
}